jquery 图像地图悬停效果答案

【问题标题】：jquery image map hover effectsjquery 图像地图悬停效果
【发布时间】：2011-05-21 18:12:57
【问题描述】：

我创建了一个图像地图，我想在鼠标悬停时突出显示地图区域。为此，我编写了以下代码。

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() 函数似乎也不适用于 this 选择器。

请指导我该如何解决

【问题讨论】：

标签： jquery html maps

【解决方案1】：

你需要了解<map>是什么意思，它是对图片点击区域的简单定义

说$(this).css('border','1px solid #FF0000'); 是让<map> 有一个实心边框，但<map> 就像<head> 元素一样，它只包含定义。

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

【讨论】：

【解决方案2】：

好像当你在地图区域移动鼠标时，会弹出一个警报，此时你的鼠标已经离开地图区域，所以触发了onmouseleave事件，所以有两个alerts .如果你用console.log替换它们，应该没问题。在这里测试：http://jsfiddle.net/8ZXb9/

【讨论】：