jquery - JSP で mouseEnter と mouseLeave が機能しない

Question

私はこの JavaScript を書きました

<script>
   $(document).ready(function(){
      $(".sidebarmenu").mouseenter(function(){
        $(".sidebarmenu").css('display','block');  
   });
   $(".sidebarmenu").mouseleave(function(){
  $(".sidebarmenu").css('display','enter');
   });
 });
</script>

JSP でリストを非表示にします。

<div id="pageNav">
<div class="sidebarmenu">
    <ul>
         <li>......</li>
         <li>......</li>
    </ul>
 </div>
</div>

どこで私は間違えましたか？コードが機能していません..

Answer 1

このフィドルをチェックしてください

フィドル

$(document).ready(function(){
       $(".sidebarmenu").mouseover(function(){
            alert('over');  
       });
       $(".sidebarmenu").mouseleave(function(){
          alert('leave');  
       });
 });

Answer 2

フィドル

<script type="text/javascript">

   $(document).ready(function(){

     $(".sidebarmenu").mouseenter(function(){

         $(this).find('ul').show('slow');
     });

     $(".sidebarmenu").mouseleave(function(){

         $(this).find('ul').hide('slow');  
     });
 });

</script>

アップデート

divにテキストを追加してみてください

<div class="sidebarmenu">
   my div
    <ul>
         <li>......</li>
         <li>......</li>
    </ul>
 </div>

mouseenterdiv 内に要素が表示されていない場合、イベントはターゲットを見つけることができないようです。

または、境界線を追加するか、背景色をsidebarmenudivに追加してみてください

Answer 3

それ以外の：

$(".sidebarmenu").css('display','enter');

行う

$(".sidebarmenu").css('display','none');

または

$(".sidebarmenu").hide();

ただし、このコードは $(".sidebarmenu") を非表示にするため、この後は mouseenter できません