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