Question

我实际上试图用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（）或使用悬停（）而不是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 }
        );

使用children（“。class”）元素在mouseenter / mouseleave上显示/隐藏

1 个答案: