如何強制圖像工具提示顯示在其他工具提示之上？

我有一個CSS圖像工具提示，當它懸停時，它會顯示另一個大圖像工具提示。如何強制圖像工具提示顯示在其他工具提示之上？

現在，當我將鼠標懸停和我有提示附近的另一個提示（小）的形象，我得到這一結果：

正如你所看到的，大的工具提示顯示下第二個工具提示（小）圖像。

我想迫使它顯示以上那個小工具提示。

下面是HTML代碼：

.maptt { 
 
    margin-left: 350px; 
 
    text-align: center; 
 
    margin-top: 97px; 
 
    z-index: 200; 
 
    position: absolute; 
 
} 
 
.mapttlish { 
 
    margin-left: 450px; 
 
    text-align: center; 
 
    margin-top: 197px; 
 
    z-index: 200; 
 
    position: absolute; 
 
} 
 
/* NewTooltip */ 
 

 
a.tooltip1 { 
 
    outline: none; 
 
} 
 
a.tooltip1 strong { 
 
    line-height: 30px; 
 
} 
 
a.tooltip1:hover { 
 
    text-decoration: none; 
 
} 
 
a.tooltip1 span { 
 
    z-index: 10; 
 
    display: none; 
 
    padding: 14px 20px; 
 
    margin-top: -30px; 
 
    margin-left: 28px; 
 
    width: 300px; 
 
    line-height: 16px; 
 
} 
 
a.tooltip1:hover span { 
 
    display: inline; 
 
    position: absolute; 
 
    color: #111; 
 
    border: 1px solid #DCA; 
 
    background: #fffAF0; 
 
} 
 
.callout { 
 
    z-index: 20; 
 
    position: absolute; 
 
    top: 30px; 
 
    border: 0; 
 
    left: -12px; 
 
} 
 
/*CSS3 extras*/ 
 

 
a.tooltip1 span { 
 
    border-radius: 4px; 
 
    box-shadow: 5px 5px 8px #CCC; 
 
}

<div class="maptt"> 
 

 
    <!-- tooltip1--> 
 
    <a href="#" class="tooltip1"> 
 
    <img src="http://coreneto.com/delete/hover.png" /> 
 
    <span> 
 
     <img class="callout" /> 
 
     <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">First</strong> 
 
    </span> 
 
    </a> 
 
</div> 
 

 
<div class="mapttlish"> 
 

 
    <!-- tooltip2--> 
 
    <a href="#" class="tooltip1"> 
 
    <img src="http://coreneto.com/delete/hover.png" /> 
 
    <span> 
 
     <img class="callout" /> 
 
     <img src="http://coreneto.com/delete/hover-big.png" style="float:right;" /><strong style="font-size:16px;">Second</strong> 
 
    </span> 
 
    </a> 
 
</div>

這裏是一個人住一：JSfiddle

來源

2016-11-04 StackBuck

這看起來像一個z-index問題。正確的z-index添加到a.tooltip1:hover span並給予z-indexauto到.maptt：

a.tooltip1 span, 
a.tooltip1:hover span { 
    z-index: 9999; 
} 
.maptt { 
    z-index: auto; 
}

預覽

小提琴：https://jsfiddle.net/zogbs35w/

來源

2016-11-04 13:54:57

如何強制圖像工具提示顯示在其他工具提示之上？

回答

相關問題