显示隐藏图像使用jquery鼠标悬停的DIV问题

背景：我有下面的图片包装在DIV标签下。当用户在图像上执行mouseover时，会出现overlayInfo DIV标签（代码如下）。显示隐藏图像使用jquery鼠标悬停的DIV问题

<script type="text/javascript"> 

     $(document).ready(function() 
     { 
      $("#overlayInfo").hide(); 

      $("#ProjectPicture").hover(function(event) { 
       $("#overlayInfo").show(); 
      }); 

      $("#ProjectPicture").mouseleave('mouseleave', function() { 
       $("#overlayInfo").hide(); 
      }); 

     }); 
    </script> 

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div>

问题：有，我对图像的鼠标悬停事件看到多个问题。图像大小为250 x 200像素。

的overlayInfo标签间歇性出现在图像鼠标悬停
当用户在图像上移动鼠标，而不是被稳定

的overlayInfo标签闪烁有什么，我做错了。

新增的jsfiddle http://jsfiddle.net/2My79/5/

来源

2014-06-13 Yashman Gupta

嗨，我觉得你使用了错误的事件。我估摸使用$ .hover会更好。你可以做一个JSFiddle，我可以为你转换它吗？谢谢 –

@Jit我也试过悬停，但它仍然是相同的 –

请添加一个JSFiddle，以便其他人可以看到是什么让你的问题发生 – Kyojimaru

更新：由于我发现解决方案可以消除原始问题，并解决了昨天我通过添加pointer-events: none而花费了的解决方法，因此问题已关闭。现在我不再需要使用它。

为我工作的解决方案，可以发现@ http://www.backslash.gr/demos/contenthover-jquery-plugin/

@Bhavik感谢小提琴帮助。

为使闪烁效果在#ProjectPicture的鼠标悬停上消失，我在#overlayInfo的CSS中添加了pointer-events: none;。唯一的缺点是它会停止显示我在div标签中的任何工具提示。

完整的来源是@http://jsfiddle.net/yashmangupta/5zBNE/1/。因为我必须尽快结束这个问题，所以我跟我的解决方案走在前面，但现在还在找工作的专家建议

#overlayInfo 
{ 
    position: absolute; 
    width: 97%; 
    top: 10px; 
    height: 183px; 
    bottom: 0%; 
    border: 0px solid; 
    z-index: 99999; 
    background-color: rgba(255, 255, 255, 0.75); 
    pointer-events: none; 
}

来源

2014-06-13 14:38:21

试试这个：

HTML：

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div>

的JavaScript：

$(document).ready(function() 
    { 
     $("#overlayInfo").hide(); 

     $("#ProjectPicture").mouseover(function() { 
      $("#overlayInfo").show(); 
     }); 

     $("#ProjectPicture").mouseleave(function() { 
      $("#overlayInfo").hide(); 
     }); 

    });

而对于overlayInfo DIV随机CSS：

#overlayInfo { display: none; width: 200px; height: 200px; background-color: #000; }

来源

2014-06-13 09:42:40

提供小提琴。这不是对我们的工作 –

我测试过，它的工作，我会提供小提琴 –

下面是一个例子，对我很好：http://jsfiddle.net/K6day/ –

您应该检查您的元素是否已经可见。尝试是这样的：

$("#ProjectPicture").on('mouseenter', function() { 
    $target = $("#overlayInfo"); 
    if($target.is(':visible')) return; 
    $target.show(); 
}).on('mouseleave', function() { 
    $target = $("#overlayInfo"); 
    if(!$target.is(':visible')) return; 
    $target.hide(); 
});

来源

2014-06-13 09:43:22 kosmos

中不能正常工作，该元素已经可见。 –

哟是什么意思？没有问题，如果该元素已经可见或没有。通过检查，您可以防止显示已经显示的内容。与隐藏一样。所以你也可以防止这些间歇元素。我在jsfiddle上进行了测试并开始工作。 – kosmos

当页面加载元素被隐藏时，当鼠标在图像上结束时，会显示DIV标签。问题在于它闪烁。你可以检查小提琴@ http://jsfiddle.net/2My79/1/ –

您可以使用此还有：

$(document).ready(function() 
     { 
      $("#ProjectPicture").mouseover(function() { 
     // do work for mouse over 
       $("#overlayInfo").show(); 
     }).mouseleave(function() { 
     $("#overlayInfo").hide(); 
     // do work for mouse out 
      }); 
     });

和你的HTML：

<div id="ProjectPicture"> 
    <img src="https://lh4.googleusercontent.com/-NnUDSkolO6M/AAAAAAAAAAI/AAAAAAAAAPg/Rp2eTavq49w/s120-c/photo.jpg"> 
</div> 

<div id="overlayInfo" style=""mouseoverlay:none> 
    hello 
    <li class="fa fa-cloud" title="Web"></li> 
    <li class="fa fa-shopping-cart" title="Shopping Cart"></li> 
</div>

活生生的例子：http://jsbin.com/tocotita/2/edit

来源

2014-06-13 09:52:52

谢谢，你可以检查解释http://jsfiddle.net/2My79/1/问题的小提琴。 –

显示隐藏图像使用jquery鼠标悬停的DIV问题

回答

相关问题