Jquery：图像地图区域上的鼠标悬停事件答案

【问题标题】：Jquery: mouseover event on image map areaJquery：图像地图区域上的鼠标悬停事件
【发布时间】：2011-10-22 07:43:45
【问题描述】：

我正在尝试对图像地图区域的鼠标悬停执行操作。这是我的 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>

这是我的 js：

$('.mapping').mouseover(function() {

    alert($(this).attr('id'));

}).mouseout(function(){
    alert('Mouseout....');      
});

我不明白为什么，但是 jquery 只针对第一个区域而不是其他区域启动。任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： jquery image map area

【解决方案1】：

我刚刚在 Safari 中尝试了您的代码，它按预期工作。 2 个单独的区域发出单独的警报。一个是警报“qdk”和其他“未定义”，因为您没有第二个地图的 ID 属性。

【讨论】：

好消息，我什至从没看过 ID :) 可悲的是，我以前为此烧过自己。

【解决方案2】：

您是否尝试过使用悬停？

来自 jquery 站点的示例...

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

【讨论】：