悬停价格标签时的图像映射

Question

如何在图像上映射价格标签（类似于图像映射）， 请找到以下屏幕截图链接：

http://www.awesomescreenshot.com/image/2156304/e6659de2c10638d4314a4d34924cec5e

thanks

Answer 1

您可以创建一个absolute 定位的 div 并在其中插入标签图像。然后添加一个事件监听器，当点击 div 时会打开弹出窗口。

Answer 2

你可以使用css来渲染红色border，在<img>元素content属性:after显示数据:after相邻<content>元素的伪元素，position设置为absolute 在视口内的特定位置显示元素。

#tag content {
  position: absolute;
  display: block;
  color: gold;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
#tag img:nth-of-type(1) ~ img {
  display: block;
  position: absolute;
  border: 4px solid transparent;
  outline: thick solid red;
  padding: 16px;
}
#tag img:nth-of-type(1) ~ img:hover + content:after,
#tag img:nth-of-type(1) ~ content:hover:after {
  content: attr(data-tag);
  text-shadow: 1px 1px 2px purple;
}
#tag img:nth-of-type(2),
#tag img:nth-of-type(2) + content {
  top: calc(17%);
  left: calc(66%);
}
#tag img:nth-of-type(3),
#tag img:nth-of-type(3) + content {
  top: calc(36%);
  left: calc(27%);
}
#tag img:nth-of-type(4),
#tag img:nth-of-type(4) + content {
  top: calc(95%);
  left: calc(7%);
}

<div id="tag">
  <img src="http://lorempixel.com/500/300/nature" />
  <img src="http://lorempixel.com/33/33/cats" class="tag" data-tag="cat1" />
  <content data-tag="cat1"></content>
  <img src="http://lorempixel.com/33/33/cats" class="tag" data-tag="cat2" />
  <content data-tag="cat2"></content>
  <img src="http://lorempixel.com/33/33/cats" class="tag" data-tag="cat3" />
  <content data-tag="cat3"></content>
</div>