2

我有这张图片：

在此处输入图像描述

当我将鼠标悬停在我创建的图像地图上时，我试图显示一个 div。由于某种奇怪的原因，它只工作一次，并且随机工作。此外，当我第一次将鼠标悬停在图像地图上时，我注意到显示 div 的某种延迟。此外，代码不能在 Firefox 上顺利运行，而在 Chrome 上却可以。

到目前为止，这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            #pipelines{
                margin-left:auto;
                margin-right:auto;
                margin-top:auto;
                margin-bottom:auto;
            }
            #content{
            }
        </style>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Pipeline</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
        <div id="pipelines">
            <img src="2D_Pipeline(Sample).jpg" usemap="#Map" border="0"/>
            <map name="Map" id="Map">
              <area shape="rect" coords="38,41,152,70" href="#" alt="script" />
            </map>
        </div>
        <div id="content"><h4>Test!</h4></div>
        <script>
            $("#Map").on('mouseenter',function(e){
               $("#content").show();
               $("#content").offset({left:e.pageX,top:e.pageY});
            });
            $("#Map").on('mouseleave',function(){
              $("#content").css("display", "none");
            });
        </script>
    </body>
</html>

我的 jquery 代码段中有什么我做错了吗？或者我可以使用其他任何东西？

4

1 回答 1

1

试试这个：http: //jsfiddle.net/b9kck/4/

我认为问题在于，当您将鼠标悬停在内容上时，它会认为您离开了地图，导致它隐藏了内容。然后它会意识到你再次进入地图并再次显示内容......等等。

为了解决这个问题，我还在内容上添加了 mouseenters 和 mouseleaves。我添加了延迟以补偿可能发生的任何延迟。像这样：

$("#content").stop().delay(500).hide();
于 2013-05-21T05:24:27.217 回答