Как показать/скрыть второй div, наведя первый?

Следующий код работает нормально, но есть небольшая проблема, которую я не мог исправить.Как показать/скрыть второй div, наведя первый?

Пока div2 отображается, перемещая указатель мыши внутри его содержащих ссылок (от одной ссылки на другую), он становится скрытым.

Что не так и как исправить?

<html> 
<body> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> 

    <div> 
     <span id="div1">User Name</span> 
     <section id="div2"> 
      <a id="lnkLogin" href="#">Link 1</a> 
      <a id="lnkStatus" href="#">Link 2</a> 
     </section> 
    </div> 
    <script> 
     $(function() { 
      jQuery('#div2').hide(); jQuery('#div1').mouseover(function() { 
       jQuery('#div2').fadeIn(); 
      }); 
      jQuery('#div2').mouseout(function() { 
       jQuery('#div2').fadeOut(); 
      }); 
     }); 
    </script> 
</body> 
</html>

Fiddle

Спасибо за внимание!

источник

2014-09-26 Kardo

Просто замените '.mouseout' на' .mouseleave': [обновленный скрипт] (http: // jsfiddle. нетто/uzq6jfmo/3 /). – Regent

@Regent: Я заменил их, но не сработал! – Kardo

#div2 Места в #div1:

<div> 
    <span id="div1">User Name 
     <section id="div2"> 
      <a id="lnkLogin" href="#">Link 1</a> 
      <a id="lnkStatus" href="#">Link 2</a> 
     </section> 
    </span> 
</div>

Fiddle demo

Обратите внимание, что я изменил в mouseenter и mouseleave для предотвращения повторений поведения. Я также предлагаю значения семантического идентификатора вместо значений типа элемента, которые становятся неправильными при изменении вашей разметки: #username, , #userlinks

источник

2014-09-26 20:14:59 isherwood

Как показать/скрыть второй div, наведя первый?

ответ

Смежные вопросы