Question

下午。

我在HTML页面上创建对象，当您将鼠标悬停在对象上时会显示工具提示。

我似乎无法将工具提示悬停在所有对象的前面。它似乎只是坐在它所涉及的那个面前。

以下是一个例子：

.red 
{
  height: 75px;width: 75px;
  background: red;
  position: absolute;z-index: 1;
}

#red_tip
{
  display: none;  
}

.red:hover #red_tip
{
  display: block;
  background: blue;
  position: absolute; z-index:2;
  top:50px; left:50px;
  width: 100px;  
}

.green 
{
  height: 75px;width: 75px;
  background: green;
  position: absolute; z-index: 1;
  top: 75px; 
}

#green_tip
{
  display: none;  
}

.green:hover #green_tip
{
  display: block;
  background: blue;
  position: absolute; z-index:2;
  top:50px; left:50px;
  width: 100px;  
}

<div class="red">Red 
<div id="red_tip">A tip for red goes here</div>  
</div> 

<div class="green">Green
<div id="green_tip">A tip for green goes here</div>  
</div>

如果你将鼠标悬停在红色方框上，你会发现小费位于绿色框后面，我需要它在前面。

非常感谢，迈克尔。

Answer 1

只要红色和绿色div具有相同的z-index，其中任何更高的z-index实际上都不会产生任何差异。所以你可以简单地给红色div一个比绿色更高的z指数 - 只要这个顺序可靠地保持不变。

这里有关于z-index堆叠上下文的一些有用信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

每个堆叠上下文都是自包含的：在堆叠元素的内容之后，整个元素将被视为父堆叠上下文的堆叠顺序。

Answer 2

将绿色潜水位置设为相对值，将z-index设为-1

.red 
{
    height: 75px;width: 75px;
  background: red;
  position: absolute;z-index: 1;
}

#red_tip
{
  display: none;  
}

.red:hover #red_tip
{
  display: block;
  background: blue;
  position: absolute; z-index:15;
  top:50px; left:50px;
  width: 100px;  
}

.green 
{
    height: 75px;width: 75px;
  background: green;
  position: relative; z-index:-1;
  top: 75px; 
}

#green_tip
{
  display: none;  
}

.green:hover #green_tip
{
  display: block;
  background: blue;
  position: absolute; z-index:2;
  top:50px; left:50px;
  width: 100px;  
}

Answer 3

这是一个棘手的问题。在.red样式中，设置其z-index: 2;。

.red 
 {
    height: 75px;width: 75px;
    background: red;
    position: absolute;z-index: 2;
 }

Answer 4

从.red和.green中删除z-index应该可以解决您的问题。此外，您应该将正文的边距设置为0.这将有助于防止这两个div重叠，就像它们目前一样。

body    {
    margin: 0;
    }

.red {
    height: 75px;
    width: 75px;
    background: red;
    position: absolute;
    }

#red_tip    {
    display: none;  
    }

.red:hover #red_tip {
    display: block;
    background: blue;
    position: absolute; z-index:2;
    top:50px; left:50px;
    width: 100px;  
    }

.green  {
    height: 75px;
    width: 75px;
    background: green;
    position: absolute;
    top: 75px; 
    }

#green_tip  {
    display: none;  
    }

.green:hover #green_tip {
    display: block;
    background: blue;
    position: absolute; z-index:2;
    top:50px; left:50px;
    width: 100px;  
    }

Answer 5

您也可以通过包装类来简化它，然后您只需调用类工具提示。

a.tooltips {
position: relative;
display: inline;
margin:50px 0 0 50px;
top:50px;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}

然后调用它做类似的事情

<a class="tooltips" href="#">CSS Tooltips
<span>Tooltip</span></a>

Answer 6

检查是否有任何未关闭的<div>。

在其他一切面前展示div？

6 个答案: