如何强制图像工具提示显示在其他工具提示之上？

我有一个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

如何强制图像工具提示显示在其他工具提示之上？

回答

相关问题