Question

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

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

thanks

Answer 1

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

Answer 2

您可以使用css呈现红色border，在:hover <img>元素的content属性显示数据: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>

git rm -r --cached child

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

2 个答案: