JQuery скрыть шоу ID

Question

HTML

<ul id="menüü"> 
      <li id="meist"> 
       <p><a href="meist.html">Meist</a></p> 
      </li> </ul> 


<div id="submenu"> 
    <ul id="submeist"> 
     <li class="asi1"> 
      Asi 1 
     </li> 
     <li class="asi2"> 
      Asi 2 
     </li> 
     <li class="asi3"> 
      Asi 3 
     </li> 
    </ul> 
</div> 

CSS

#meist { 
     display: inline; 
     float:left; 
     width:180px; 
     height:50px; 
     color:#191919; 
     text-align:center; 
     overflow:hidden; 
     background:#990000; 
     -moz-border-radius-top-left: 50px; 
     border-top-left-radius: 50px; 

    } 

#submeist 
    { 
     font-size:12px; 
     display:none; 
    } 

    #submeist .asi1 
    { 
     margin-left:70px; 
    } 

     #submeist .asi2 
    { 
     margin-left:25px; 
    } 

    #submeist .asi3 
    { 
     margin-left:25px; 
    } 

JS

$("#meist").mouseout(function() { 
    $("#submeist").hide(); 
    return false; 
}); 

$("#meist").mouseenter(function() { 
    $("#submeist").show(); 
    return false; 
}); 

Я здесь, чтобы узнать и выяснить, как показать "submeist", когда парит мыши " meist». Я узнал некоторые ОЧЕНЬ основы jQuery, но почему-то этот код не работает. Помощь очень ценится и, если возможно, много комментариев :)

Answer 1

Вы должны использовать mouseleave вместо mouseOut в MouseOut будет получить срабатывает даже если вы наведите указатель мыши на a или p, который находится внутри #meist.

$(function(){ 
    $("#meist").mouseleave(function() { 
     $("#submeist").hide(); 
     return false; 
    }); 

    $("#meist").mouseenter(function() { 
     $("#submeist").show(); 
     return false; 
    }); 
}); 

Demo

От Doc

MouseLeave событие отличается от отведения указателя мыши в том, как он обрабатывает событие пузыриться. Если мышь использовалась в этом примере, тогда, когда указатель мыши перемещается из внутреннего элемента, обработчик будет запущен. Обычно это нежелательное поведение. С другой стороны, событие mouseleave запускает только его обработчик, когда мышь покидает элемент, к которому он привязан, а не потомок. Поэтому в этом примере обработчик запускается, когда мышь покидает элемент Outer, но не элемент Inner.

И пара событие:

mouseover-mouseout

mousenter-mouseleave (зависать)

Answer 2

Код, кажется, вам нужно положить document.ready на обеспечение доступности элементов элементов для сценария. Я использовал mouseleave вместо mouseout и мерцание закончилось, так как мышь вызывается событием, если вы переходите на p или a.

Live Demo

$(document).ready(function(){  
$("#meist").mouseleave(function() { 
    $("#submeist").hide(); 
     return false; 
    }); 

    $("#meist").mouseenter(function() { 
     $("#submeist").show(); 
     return false; 
    }); 
}); 

Обработчик передается .ready() гарантированно будет выполняться после того, как DOM готовы, так что это, как правило, лучшее место, чтобы приложить все другие обработчиков событий и запустить другой код jQuery. При использовании сценариев, которые зависят от значения свойств стиля CSS, очень важно, чтобы ссылаться на внешних таблиц стилей или встраивать элементы стиля перед ссылкой на скриптов, Reference

Answer 3

Изменение mouseenter к mouseover, поэтому при наведении на ссылку она не будет скрывать элемент.

Вы не можете привязывать события к элементам, которые не существуют, если вы не используете делегатов jQuery.

$(document).on("mouseover", "#meist", function(e) { 
    // code 
}); 

Или вы можете подождать, пока DOM загрузит, а затем свяжет события. Существует функция JQuery для этого называется .ready

$(document).ready(function() { /* code */ }); 
$(function() { /* code */ }); // this is an alias 

И это также будет работать, если вы разместите <script>, что в конце страницы.