Question

我希望有人可以帮助一些jquery，当图像映射上的区域矩形悬停在上面时，可以显示一系列隐藏的div。

这里简要说明了大约有15个热点。我想我可以使用jquery从div中移除.hide类，其ID与图像映射中的项目名称相同。这是正确的做法吗？

<map name="services" >
<area shape="rect" coords="288, 152, 471, 191" href="#" item="brand"      alt="brand assesment" />
<area shape="rect" coords="210, 227, 358, 271" href="#" alt="focus groups" item="focus" />
</map>

<div  id="brand" class="hide">
brand text
</div>

<div  id="focus" class="hide">
focus stuff
</div>

Answer 1

添加影响该元素的javascript代码，并使用id标识该元素（例如，对于第一个区域元素，使用 element-id ）：

    $( "#element-id" )
      .mouseover(function() {
        $("#brand").show();
      })
      .mouseout(function() {
        $("#brand").hide();
      });

Answer 2

由于您的问题不够明确，我认为您尝试使用div查找id等于area的属性item正在徘徊。

$('area').mouseover(function(){
    $('#' +$(this).attr('item')).removeClass('hide');
}).mouseleave(function(){
    $('#' +$(this).attr('item')).addClass('hide');
})

悬停在图像映射区域时显示div

2 个答案: