试图阻止位于图像顶部的div上的jQuery mouseout fadeOut（）——通过ajax加载的内容_Jquery_Mouseover

试图阻止位于图像顶部的div上的jQuery mouseout fadeOut（）——通过ajax加载的内容

jquery

试图阻止位于图像顶部的div上的jQuery mouseout fadeOut（）——通过ajax加载的内容,jquery,mouseover,Jquery,Mouseover,其他滚动我试图阻止一个div在不应该消失的时候消失这个div位于图像的顶部。该图像具有mouseover和mouseout功能，当用户从一个图像滚动到另一个图像时，div会出现和消失我应该指出，div及其周围的所有html都是动态创建的，因此我必须使用.live事件处理程序当一个人翻过div本身时，问题就来了。因为从图像的角度来看，这在技术上是一个mouseout事件，div消失了，尽管我希望它保持存在，因为用户并没有真正翻过一个不同的图像，只是碰巧坐在图像顶部的一个不同的元素这里有一

其他滚动

我试图阻止一个div在不应该消失的时候消失

这个div位于图像的顶部。该图像具有mouseover和mouseout功能，当用户从一个图像滚动到另一个图像时，div会出现和消失

我应该指出，div及其周围的所有html都是动态创建的，因此我必须使用.live事件处理程序

当一个人翻过div本身时，问题就来了。因为从图像的角度来看，这在技术上是一个mouseout事件，div消失了，尽管我希望它保持存在，因为用户并没有真正翻过一个不同的图像，只是碰巧坐在图像顶部的一个不同的元素

这里有一个链接，指向我迄今为止所做的工作：

请注意，翻滚图像时，会出现一个信息框（div），但翻滚此div会使其淡出，从而产生令人不快的闪烁效果

以下是处理该行为的代码：

（我试图测试上次发生翻车的地方，但这很棘手）


变量curDockItem、lastDockItem、lastDockItemElement、curDockItemElement；
$（“#设计”）.live（“鼠标悬停”，功能（e）{
var parentNode=e.target.parentNode；
var infobox=$（parentNode.find（“div”）；
curDockItemElement=e.target.nodeName；
$（信息框）。每个（函数（）{
美元（这个）.fadeIn（“慢”）；
lastDockItem=信息框；
});
});
$（“设计”）.live（“鼠标输出”，功能（e）{
var parentNode=e.target.parentNode；
var infobox=$（parentNode.find（“div”）；
$（信息框）。每个（函数（）{
如果（curDockItemElement=='IMG'）{
//警报（lastDockItem[0]）；
$（lastDockItem）.each（函数（）{
美元（本）。淡出（“缓慢”）；
});
}
});
});
div id=“设计”>
电缆针织羊驼连衫
羊绒针织短裤
美利奴/马海毛/丝绸
针织短裤
羊绒/丝绸
方格毛衣

您是否尝试在div上放置相同的mouseover、mouseout事件？当它们在div上显示时，是这样的吗？我不确定这是否会产生闪烁-您必须对其进行测试。

如果您使用看起来像一堆二进制文本的按钮来自动缩进代码以使其可读，这会有所帮助。谢谢：）我还在编辑呢。对不起，我还在学。谢谢，我以前没见过。那很方便！我试过了，但还是发生了。闪烁变得更糟糕的是，它是一个缓慢的淡入淡出，所以它实际上闪烁得非常慢。你能使用HoverIntent@让你有机会确定鼠标是否在div上并取消淡入淡出吗？

    <head>
    <script>

     var curDockItem, lastDockItem, lastDockItemElement, curDockItemElement;

    $("#design ").live("mouseover", function(e){
     var parentNode = e.target.parentNode;
     var infoBoxes = $(parentNode).find("div");
     curDockItemElement = e.target.nodeName;

     $(infoBoxes).each(function(){
      $(this).fadeIn("slow");
      lastDockItem = infoBoxes;      
     });
    });

     $("#design").live("mouseout", function(e){
     var parentNode = e.target.parentNode;
     var infoBoxes = $(parentNode).find("div");
     $(infoBoxes).each(function(){ 
      if (curDockItemElement == 'IMG') {
       //alert (lastDockItem[0]);
       $(lastDockItem).each(function(){
        $(this).fadeOut("slow");
       });
      }
     });
    });
</script>
   </head>
div id="design">
     <span id="Romper">
  <image  />
  <div class="boxItemInfo" style="margin-left:50px; margin-top:-180px;" >
   <h1>Cable-Knit<br>Alpaca Romper</h1>
  </div>
 </span>
 <span id="RedShorts">
  <image  />
  <div class="boxItemInfo" style="margin-left:150px; margin-top:-220px;" >
   <h1>Cashmere<br>Knit Shorts</h1>
  </div>
 </span>
 <span id="StripeShorts">
  <image  />
  <div class="boxItemInfo" style="margin-left:100px; margin-top:-220px;" >
  <h1>Merino/Mohair/Silk<br>Knit Shorts</h1>
  </div>
 </span>
 <span id="CheckerBow">
  <image  />
  <div class="boxItemInfo" style="margin-left:75px; margin-top:-265px;" >
   <h1>Cashmere/Silk<br>Checkered Sweater </h1>
      </div>
     </span>
    </div>