1

我实际上是在尝试使用 jquery (1.8.3) 悬停时在另一个 div 中显示/隐藏一个 div，并带有 jquery ui (1.9.2) “puff”效果。这是我的 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/

4

1 回答 1

-1

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

像这样的东西：

$("#divToBeHoveredOn").hover(
           function()
           { 
                 // content to show
           },
           function() 
           { 
         //content to hide }
        );
于 2013-01-24T00:35:47.657 回答