Question

我正在使用热点来创建一个包含悬停时弹出的几个部分的地图。我正在使用jquery mouseenter和mouseleave来悬停弹出窗口。

用户可以直接悬停在地图部分上，也可以将鼠标悬停在地图页脚的按钮上。

当鼠标悬停在地图上的图像上时，以及悬停在地图页脚的链接上时，图像会弹出。

图像包含在链接中，页脚中的按钮也是如此。点击时图像不会重定向。我认为这是因为链接在图像上，而不是直接在页脚中的按钮等热点上。

是否可以点击图片？我搜索过类似的问题，并没有发现与此问题有多大关系。任何建议都非常感谢。提前谢谢。

Code Example: 
(using google.com just for testing)

// CSS

#city1 {position: absolute; top: 25px; left: 25px}

//标记

<div id="wrapper">
  <a href="https://google.com/" target="_parent"><img id="city1" class="hide" src="images/city1.jpg" /></a>

  <img src="images/map.png" usemap="#map"/>

  <map name="map">

    <area id="city-one" shape="rect" coords="25,33,209,258" href="https://google.com/" target="_parent">

    <area id="keyCity1"  shape="rect" coords="494,558,599,608" href="https://google.com/" target="_parent"> 

  </map>
</div>

//脚本

$(document).ready( function() {
    $('.hide').hide();

    function hoverImg(hoverLinkDiv, hoverImgDiv){
        $(hoverLinkDiv).bind('mouseenter', function(){
            $(hoverImgDiv).fadeIn(250);

        });

        $(hoverLinkDiv).bind('mouseleave', function() {     
            $(hoverImgDiv).hide();
            $(hoverImgDiv).fadeOut(250);

        });

    }

       hoverImg('#city-one', '#city1');
       hoverImg('#keyCity1', '#city1');   

});

Answer 1

在您的函数hoverImg中，您正在使用选择器#imageWC。在您的示例中，这应该是#city1。所以，

hoverImg('#city-one', '#city1');

另一件事，city1.jpg的images目录的路径拼写为imges。你的路径可能是错的。

这是一个演示： http://codepen.io/megasmack/pen/Irywk

在mouseenter上禁用图像链接

1 个答案: