Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Не могу связать два события для разных элементов. (https://javascript.ru/forum/dom-window/36207-ne-mogu-svyazat-dva-sobytiya-dlya-raznykh-ehlementov.html)

nono 07.03.2013 15:03

Не могу связать два события для разных элементов.
 
Здравствуйте.Возникла проблема.У меня при наведении курсора на ссылку,рядом появляется div,он должен висеть,до тех пор пока курсор висит на ссылке,либо в пределах дива.Не могу понять как связать событие для ссылки с событием для блока.Спасибо)
<script>
$(document).on('mouseenter', '.link', function(){
$('#oldid').clone().attr('id', 'newid').addClass('clone').appendTo('#conteiner');
$('#newid').css({'left': event.pageX+5,'top': event.pageY+5});
})
.on('mouseleave', '.link', function(){
$('#newid').remove();
});
</script>
Пока только так

danik.js 07.03.2013 15:51

А что делает этот код? И чего не делает? И нужно обернуть его в
[js]..[/js]

nono 07.03.2013 16:00

Цитата:

Сообщение от danik.js (Сообщение 239306)
А что делает этот код? И чего не делает? И нужно обернуть его в
[js]..[/js]

при наведении курсора на ссылку он клонирует сужествующий div и выводит рядом со ссылкой клон,а если курсор отвести, удаляет его.А нужно чтоб div сохранялся,если переместить курсор со ссылки на него.То есть сохранять клон только если курсор находится либо на ссылке,вызвавшей его,либо на самом клоне.

Deff 07.03.2013 16:34

"E=nono]Здравствуйте.Возникла проблема.У меня при наведении курсора на ссылку,рядом появляется div,он должен висеть,до тех пор пока курсор висит на ссылке,либо в пределах дива.Не могу понять как связать событие для ссылки с событием для блока.Спасибо)
[/quote]
<style>
.mouseover {
  display:none;
  position:absolute;
  padding:2px 7px;
  background-color:#61A4DB;
  margin-left:75%;
  margin-top:-3px;
}
span.hover:hover .mouseover {
  padding:7px;
  display:block;
}
span.hover {
  display:inline-block;
  position:relative;
  border:red dashed 1px; /*Чисто для теста расположения div.mouseover*/
  padding:7px;
}
span.hover a{
    background-color:#F1CF1A;
    padding:2px 7px;
}
</style>
<span class=hover><a href="http://javascript.ru/forum/">Тест</a>
  <div class="mouseover">
<pre>
Описание к ссылке
Описание к ссылке
Описание к ссылке
</pre>
  </div>
</span>
"

nono 07.03.2013 17:22

Спасибо,но это не совсем то что нужно,мне нужна реализация именно на jquery.Как можно сделать так,чтоб .on('mouseleave', link, function(){
$(div).remove();}) не срабатывал если выполняется $(div).mouseenter(...);?
div-клон который появляется рядом
может я неправильно выражаюсь правда.
я хочу сделать перелинковку между вопросами и ответами,как это сделано на некоторых имиджбордах

danik.js 07.03.2013 17:58

1) Скрывать див по таймауту, по наведении на див - отменять таймер.
2) По mouseleave проверять event.toElelement - если это наш див, то ничего не делать.

Deff 07.03.2013 18:29

Цитата:

Сообщение от nono
Спасибо,но это не совсем то что нужно,мне нужна реализация именно на jquery.Как можно сделать так,чтоб .on('mouseleave', link, function(){

Реализуйте на jquery, суть демки: чтобы не мучаться со связью событий - обернуть ссылку и div засунуть в конец обертки
отслеживать .mouseenter на обертке, - во что показано

nono 07.03.2013 19:21

Цитата:

Сообщение от nono (Сообщение 239351)
1) Скрывать див по таймауту, по наведении на див - отменять таймер.
2) По mouseleave проверять event.toElelement - если это наш див, то ничего не делать.

спс. второй пункт правда не понял,но буду разбираться

danik.js 07.03.2013 19:36

Это два разных варианта решения задачи.
В функцию-обрабочтик передается объект "событие", у него есть свойство toElement. В случае с mouseleave оно указывает на элемент, на который перешла мышка.


Часовой пояс GMT +3, время: 04:21.