Jquery ui jQuery：将鼠标悬停在子元素上时，使其保持打开状态

我的问题类似，但不同于

我最初在

li.item

上有一个悬停事件，这有点奇怪，但做了我需要它做的事情。我将悬停切换到范围，这样事件将在文本块而不是列表块上触发，列表块将扩展列表的整个宽度

我试图达到的效果是将鼠标悬停在

ul.sub

上。我想让它继续从

span.text

的悬停中显示队列中的动画，同时保持它的打开状态

发生的情况是鼠标正在离开范围，因此

li.item

正在触发触发器的mouseout部分

HTML

---

JavaScript

---

编辑： 我认为沿着这些线的东西是我所需要的，但是当从sub到span时，动画被重新渲染

$(document).ready(function(){
   // specific here because of other divs/list items

   $('#main li.item span.text').hover(
       function(){$(this).siblings().stop(false,true).show('slow');}
      ,function(){$(this).siblings().stop(true,true).hide('slow');}     
   );    

   $('#main li.item ul.sub').hover(
        function(){$(this).stop(false,true).show();}
       ,function(){$(this).stop(false,true).hide('slow');}
   );    

   $('li.head').hover(function(){
      $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
   });
});

将行为分为两部分，然后。也分为和。将

mouseenter

绑定到

span.text

并将

mouseleave

绑定到

li.item

：

$(document).ready(function() {
    // specific here because of other divs/list items
    $('#main li.item span.text').mouseenter(function() {
        $(this).siblings().stop(true, true).show('slow');
    });

    $('#main li.item').mouseleave(function() {
        $(this).children("ul").stop(true, true).hide('slow');
    });

    $('li.head').hover(function() {
        $(this).parent().find('ul.sub').stop(true, true).toggle('slow');
    });
});

---

这样，悬停就不会被你想要的空格触发。

我刚刚发布了这样的内容：查看编辑；然而，我认为你的解决方案是，在从跨度到子跨度再到跨度的过程中，让一切变得更加流畅。好吧，你仍然在调用

hover（）

，所以你不能拆分

mouseenter

和

mouseleave

行为，并将它们绑定到两个不同的元素，这是我答案的关键。@Frederic-yep:）没错，只是说我要去同一个地方，但你比我先到了。我会先测试它，然后回来加上/检查你=]很好，现在你正在做，但我应该指出我的答案并没有显示你的问题：动画在从sub到span时没有重新刷新：）你有一个JSFIDLE的副本可以工作吗，一切看起来都有效，但出于某种原因它不会触发显示。编辑：nevermind，拼写错误“mouseenter”中的两个“e”

   $(document).ready(function(){
      // specific here because of other divs/list items

      $('#main li.item span.text').hover(function(){
         $(this).siblings().stop(true,true).toggle('slow');     
      });       

      $('li.head').hover(function(){
         $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
      });
   });

$(document).ready(function(){
   // specific here because of other divs/list items

   $('#main li.item span.text').hover(
       function(){$(this).siblings().stop(false,true).show('slow');}
      ,function(){$(this).siblings().stop(true,true).hide('slow');}     
   );    

   $('#main li.item ul.sub').hover(
        function(){$(this).stop(false,true).show();}
       ,function(){$(this).stop(false,true).hide('slow');}
   );    

   $('li.head').hover(function(){
      $(this).parent().find('ul.sub').stop(true,true).toggle('slow');
   });
});

$(document).ready(function() {
    // specific here because of other divs/list items
    $('#main li.item span.text').mouseenter(function() {
        $(this).siblings().stop(true, true).show('slow');
    });

    $('#main li.item').mouseleave(function() {
        $(this).children("ul").stop(true, true).hide('slow');
    });

    $('li.head').hover(function() {
        $(this).parent().find('ul.sub').stop(true, true).toggle('slow');
    });
});