Question

我创建了一个图像地图，我想在鼠标悬停时突出显示地图区域。为了达到这个目的，我写了下面的代码。

JS：

<script type="text/javascript">
        $(document).ready(function(){
            $('#Map area').hover(function(){
                alert('alert');
                $(this).css('border','1px solid #FF0000');
            });
        });
</script>

HTML：

<div id="mainmap"><img src="images/map.jpg" alt="" usemap="#Map"/></div>
<map name="Map" id="Map">
        <area shape="poly" coords="21,326,203,316,220,141,52,153,48,182,37,193,29,220,27,241,28,255,33,259" href="#" alt="1" />
        <area shape="poly" coords="31,405,209,410,225,427,336,427,337,360,200,359,208,317,21,326,15,344,41,360" href="#" alt="11" />
</map>

当我鼠标悬停在某个区域时，它会发出两次警报，而我认为它应该提醒一次。此外， .css（）功能似乎不适用于此选择器。

请指导我如何解决

Answer 1

似乎当您在地图区域中移动鼠标时，会弹出一个警告，此时，您的鼠标已离开地图区域，因此触发了onmouseleave事件，因此有两个{ {1}}。如果你用alerts替换它们，它应该没问题。在此测试：http://jsfiddle.net/8ZXb9/

Answer 2

您需要了解<map>的含义，它是图像点击区域的简单定义

说$(this).css('border','1px solid #FF0000');告诉您<map>有一个可靠的边框，但<map>就像<head>元素一样，它只包含定义。

要在区域中制作边框，您确实需要有2张图像。

jquery图像映射悬停效果

2 个答案: