Question

我在HTML页面中有一个图像。当鼠标悬停在该图像的不同区域时，我想显示不同的信息。例如，当鼠标在图像上的点-1上时，我想显示信息-1。离开时，我希望信息-1隐藏，当鼠标悬停在点-2上时，我想弹出信息-2。 JS使用任何类型的库都可以吗？

Answer 1

是的，这是可能的。您可以通过两种方式接近：

Image Maps - 只是指向教程的链接
使用CSS定位图像上方的透明元素，并在其中一个悬停时显示一些文本。

我让this pen向您展示方法2 的示例。方法1有点相同，你只需要改变一点代码。

<强> HTML

<div class="img-wrapper">
  <img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">

  <div class="cloud">
    <p>Hey a cloud!</p>
  </div>
  <div class="tree">
    <p>Tree here</p>
  </div>
  <div class="grass">
    <p>Green Grass</p>
  </div>
</div>

<强> JS

$('.cloud, .grass, .tree').hover(function(){
    $(this).find('p').show();
}, function(){
   $(this).find('p').hide();
});

当然所有这些只是一个样本。虽然第一种方法允许您定义形状，但第二种方法不允许。

使用方法1可以让您定义更准确的区域，但可能很难。方法2更简单但不太准确。您的需求，您的选择。

在图像的特定位置打开弹出窗口？

1 个答案: