Question

背景：我将下面的图片包裹在DIV标记下。当用户在图片上执行mouseover时，会出现overlayInfo 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/

Answer 1

试试这个：

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; }

Answer 2

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

$("#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();
});

Answer 3

你也可以使用它：

 $(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

Answer 4

更新：由于我找到了解决原始问题的解决方案以及我采取的解决方法，因此问题已关闭   昨天加入pointer-events: none。现在我不再需要了   用它。

可以找到适合我的解决方案@   http://www.backslash.gr/demos/contenthover-jquery-plugin/

@Bhavik感谢小提琴的帮助。

要使#ProjectPicture鼠标悬停时闪烁效果消失，我在pointer-events: none;的CSS中添加了#overlayInfo。唯一的缺点是它停止显示我在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;
}

使用Jquery问题在图像鼠标悬停上显示隐藏DIV

4 个答案: