在 mouseenter/mouseleave 上显示/隐藏子元素（“.class”）

Question

我实际上是在尝试使用 jquery (1.8.3) 悬停时在另一个 div 中显示/隐藏一个 div，并使用 jquery ui (1.9.2) “粉扑”效果。 这是我的 HTML：

<li id="category_1">
  <div class="item_menu">
     <img src="image.jpg"/>
     <div class="titre" style="display:none;">menu title</div>
  </div></li>
<li id="category_2">
  <div class="item_menu">
     <img src="image.jpg"/>
     <div class="titre" style="display:none;">menu title</div>
  </div></li>
  ...

这是我的 js：

$(".item_menu").mouseenter(function(){
   $(this).children(".titre").show("puff");
}).mouseleave(function(){
   $(this).children(".titre").hide("puff");
});

问题是在动画结束之前鼠标移出时，.titre div 不会隐藏。

我尝试了很多方法来使用 stop() 来处理它，使用 toggle() 进行动画处理或使用 hover() 而不是 mouseenter/mouseleve 以及许多其他方法，并且它总是呈现相同的。 我试过一次：

$(".item_menu").mouseenter(function(){
   $(".titre").show("puff");
}).mouseleave(function(){
   $(".titre").hide("puff");
});

令我惊讶的是，它就像一个魅力，但是......因为它是它的类所指向的菜单项，当然它显示/隐藏每个项目而不是悬停的项目......所以，我认为这是 $(this).children 的问题...... 如果我不使用 jquery ui “puff” 效果（与任何其他 jquery ui 效果一样），它也可以工作......但我被要求使用这个特定的效果。所以我认为我的问题来自 $(this).children 的组合和 jquery ui 效果的使用。

由于此菜单是动态生成的，我无法真正用 id 指向项目并轻松检索它们...

小提琴：http://jsfiddle.net/EECW8/6/

Answer 1

尝试使用 .hover ：悬停文档http://api.jquery.com/hover

类似这样的：

$("#divToBeHoveredOn").hover(
           function()
           { 
                 // content to show
           },
           function() 
           { 
         //content to hide }
        );