jquery - mouseEnter 和 mouseLeave 在 JSP 中不起作用

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

代替：

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

做

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

或者

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

但是此代码将隐藏 $(".sidebarmenu") 因此您将无法在此之后进行 mouseenter

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>

当 div 内没有显示任何元素时，似乎mouseenter事件找不到目标。

或尝试为sidebarmenudiv添加边框或添加背景颜色

Answer 3

看看这个小提琴

小提琴

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