圖像映射時懸停價籤

Question

如何價簽上的影像圖一樣（像圖像映射）， 請找下面的屏幕截圖鏈接：

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

thanks 

Answer 1

您可以創建一個absolute定位div並在其中插入標籤圖像。然後添加一個事件偵聽器，它將在div上單擊時打開彈出窗口。

Answer 2

可以在<img>元件在:hover使用css呈現紅色border，顯示數據在相鄰<content>元件的:after僞元件，position設置爲absolute的content屬性來顯示在視口內的特定位置的元件。

#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>