DIV при наведении курсора мыши с JQuery уйти

Question

Я использую этот JQuery код, чтобы показать DIV при наведении курсора мыши:

$(function() { 
    $('#div1').hover(function() { 
    $('#div2').fadeIn(); 
    }, function() { 
    $('#div2').fadeOut(); 
    }); 
}); 

на jSFiddle: http://jsfiddle.net/4z2zq/4/

Это будет использовать два DIV ID:

1. div1
2. div2

Но когда #div2 получить зависание Я не могу нажать на эти ссылки! Этот div исчезнет, ​​когда я попытаюсь щелкнуть по этим ссылкам. Любая идея держать #div2 во время зависания #div2.

Answer 1

Поместите div1 и div2 внутри обертки div и привяжите событие hover к обертке.

Answer 2

Вам просто нужно вложить div2 внутри div1.

<div id="div1">hover over me 
    <div id="div2"> 
     <ul> 
      <li><a href='Google.com'>Google</a></li> 
      <li><a href='Google.com'>Yahoo</a></li> 
      <li><a href='Google.com'>AOl</a></li> 
     </ul> 
    </div> 
</div> 

выше будет работать, и все, что я сделал, было двигаться </div> от линии 1 до конца. Что составляет div2 ребенок div1.

Here is a working fork of your fiddle

Answer 3

Вам нужно обернуть div2 в div1.

<div id="div1">hover over me 
    <div id="div2"> 
     <ul> 
      <li><a href='Google.com'>Google</a> 
      </li> 
      <li><a href='Google.com'>Yahoo</a> 
      </li> 
      <li><a href='Google.com'>AOl</a> 
      </li> 
     </ul> 
    </div> 
</div> 

Вот fiddle

Answer 4

Что-то вроде этого

$(function() { 
    $('#div1').hover(function() { 
     $('#div2').fadeIn(); 
    }); 
    $('#div2').mouseleave(function() {     
     $('#div2').fadeOut(); 
    }); 
}); 

http://jsfiddle.net/4z2zq/8/

Answer 5

Для меня лучший способ изменить HTML-код:

<div id="div1">hover over me 
    <ul id="div2"> 
     <li><a href='Google.com'>Google</a></li> 
     <li><a href='Google.com'>Yahoo</a></li> 
     <li><a href='Google.com'>AOl</a></li> 
    </ul> 
</div> 

Answer 6

я предлагаю вам использовать функции псевдо CSS для этого, и положить манипулируют элемент внутри родительского (# див1) например:

#div2{ 
    display:none; 
} 

#div1:hover #div2 { 
    display: block; 
} 

вы не будете иметь причудливые переходы, если вы используете CSS 3 переходы, которые будут ограничивать возможности браузера Креста.