jQuery onmouseover + onmouseout / hover на двух разных div - PullRequest
Новая
       79

jQuery onmouseover + onmouseout / hover на двух разных div

4 голосов
/ 08 марта 2010

У меня проблема:

Вот часть моего HTML: 

<div id="div_1">
    Here Hover
</div>
<div id="div_2">
    Here content to show
</div>

А вот часть моего скрипта jQuery: 

jQuery('#div_2').hide();
jQuery('#div_1').onmouseover(function() {
    jQuery('#div_2').fadeIn();
}).onmouseout(function(){
    jQuery('#div_2').fadeOut();
});

Проблема:

Если я наведите курсор на div_1, показывается div_2, если я наведите курсор мыши, div_2 скрыт, но:

Если я сначала наведу курсор на div_1, а затем перейду к div_2, div_2 будет быстро скрыт.

Я пробовал это с jQuery.addClass (); после мыши в div_1, но ничего не меняется.

Я не хочу делать второй div в первом div ... Есть ли другой способ с jQuery?

Thx Ахмет

Ответы [ 6 ]

14 голосов
/ 09 марта 2010

Вот еще один подход, просто примените hover ко второму элементу div, чтобы он не скрывался: 

$(function() {
  $('#div_2').hide();
  $('#div_1, #div_2').hover(function() {
      $('#div_2').stop().fadeIn();
  }, function(){
      $('#div_2').stop().fadeOut();
  });
});
2 голосов
/ 25 ноября 2010

Возможно, вам нужна функция mouseleave.

0 голосов
/ 10 июня 2011

Попробуйте этот код: 

$(function() {
    jQuery('#div_2').hide();
    jQuery('#div_1').mouseover(function() {
        jQuery('#div_2').fadeIn();
    });

    jQuery('#div_2').mouseout(function(){
        jQuery('#div_2').fadeOut();
    });
});
0 голосов
/ 08 марта 2010

Добавьте обработчик наведения на #div_1, а обработчик на #div_2. Таким образом, #div_2 отображается при наведении мыши на #div_1 и скрывается при наведении мыши на #div_2 (вместо того, чтобы навести курсор мыши на #div_1). Единственный реальный недостаток в том, что для того, чтобы скрыть второй div, вы должны сначала навести на него курсор мыши.

Примерно так: 

jQuery('#div_2').hide();
jQuery('#div_1').mouseover(function() {
    jQuery('#div_2').fadeIn();
});
jQuery('#div_2').mouseout(function(){
    jQuery('#div_2').fadeOut();
});
0 голосов
/ 08 марта 2010

Попробуйте использовать hover () вместо mouseover () и mouseout ().

Проверьте эту страницу документации: http://api.jquery.com/hover/

Надеюсь, это поможет.

0 голосов
/ 08 марта 2010

Самый простой способ сделать это - поместить оба <div> s в третий контейнер <div>, а затем применить эффект наведения к контейнеру <div>.

Кстати, вы должны использовать сокращение hover для добавления обработчиков.

...