單張圖片周圍的更多工具提示

Question

假設我有一個圓角中心「元素」。如何同時在鼠標上顯示圍繞該元素的7個不同的工具提示？ （見附件JPG）。

Answer 1

您可以使用nt-child。

a.tooltip span { 
    z-index:10; 
    display:none; 
} 

a.tooltip:hover span:first-child { 
    display:block; 
    position:absolute; 
    background:blue; 
    left:0px; 
    top:0px; 
} 

a.tooltip:hover span:nth-child(2) { 
    display:block; 
    position:absolute; 
    left:60px; 
    top:0px; 
    background:red; 
} 

a.tooltip:hover span:nth-child(3) { 
    display:block; 
    position:absolute; 
    left:60px; 
    top:20px; 
    background:yellow; 
} 

a.tooltip:hover span:nth-child(4) { 
    display:block; 
    position:absolute; 
    left:0px; 
    top:20px; 
    background:green; 
} 

HTML

<!--First tooltip--> 
<a href="#" class="tooltip"> 
    Tooltip 
<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
</a> 

工作要放提示小提琴當然 https://jsfiddle.net/nx533fq2/1/

使用位置，我剛纔讓你和例子