Jquery：图像地图区域上的鼠标悬停事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6981376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery: mouseover event on image map area
提问by denislexic
I'm trying to do actions on mouseover of an image map area. Here is my HTML:
我正在尝试对图像地图区域的鼠标悬停进行操作。这是我的 HTML：
<img src="img/denisanddavid-bkgd.jpg" alt="Denis and David - web development and solution" width="1024" height="1299" border="0" usemap="#bkgdMap" id="bkgd" />
<map name="bkgdMap" id="bkgdMap">
<area shape="rect" coords="12,161,341,379" href="#" alt="qdk" id="qdk" class="mapping" />
<area shape="rect" coords="347,162,675,379" href="#" alt="gifgif" alt="gifgif" class="mapping" />
</map>
And here is my js:
这是我的js：
$('.mapping').mouseover(function() {
alert($(this).attr('id'));
}).mouseout(function(){
alert('Mouseout....');
});
I don't understand why, but the jquery is only launched for the first area and not the others. Any help would be greatly appreciated.
我不明白为什么，但 jquery 只针对第一个区域而不是其他区域启动。任何帮助将不胜感激。
Thanks.
谢谢。
采纳答案by margusholland
I just tried your code in Safari and it works just as intended. 2 separate areas that give out separate alerts. One is alerting "qdk" and other "undefined", as you don't have an ID attribute for the second map.
我刚刚在 Safari 中尝试了您的代码，它按预期工作。2 个单独的区域，发出单独的警报。一个是警告“qdk”和其他“未定义”，因为您没有第二张地图的 ID 属性。
回答by Mfoo
Did you try using hover?
您是否尝试使用悬停？
example from jquery site...
来自 jquery 站点的示例...
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
