jquery 图像地图悬停效果
我创建了一个图像地图，我想在鼠标悬停时突出显示地图区域。为了实现这一点，我编写了以下代码。
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 选择器。
请指导我该如何修复
I have created an image map and i want to highlight maps areas on mouse over. To achieve this i wrote following code.
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>
When i mouse over an area it alerts twice while i think it is supposed to alert once. Also .css() function does not seem to work with this selector.
Please guide how can i fix
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要了解
的含义，它是图像点击区域的简单定义$(this).css('border','1pxsolid #FF0000' );你告诉让有一个实心边框，但就像;元素，它只包含定义。要在这些区域中制作边框，您确实需要 2 张图像。
You need to understand what
<map>means, it's a simple definition on the click areas of an imagesaying
$(this).css('border','1px solid #FF0000');you are telling to make the<map>have a solid border, but<map>is just like the<head>elements, it only contains definitions.To make the borders in the areas, you really need to have 2 images instead.
看来当你在地图区域内移动鼠标时，会弹出一个警告，此时，你的鼠标已经离开了地图区域，所以触发了
onmouseleave事件，所以有两个<代码>警报。如果你用console.log替换它们，应该没问题。在这里测试一下：http://jsfiddle.net/8ZXb9/It seems that when you move mouse in the map area, an alert will pop out, at this point, your mouse is out of the map area, so the
onmouseleaveevent was triggered, so there are twoalerts. if you replace them withconsole.log, it should be fine. Test it here: http://jsfiddle.net/8ZXb9/