悬停时的显示框是“透明的”？

Question

好的。我无法真正解释这一点，所以我只是做了一个小提琴。 所以点击here

代码看起来像这样：

HTML：

<a href="#">Hover Me!<span class="tooltip">Hello, World!</span></a><br>
<a href="#">Hover This!<span class="tooltip">Hello, People!</span></a>

CSS：

a span {
    display: none;
    position: absolute;
    color: #fff;
    background: #000;
    padding: 5px;
}
a {
    position: relative;
}
a:hover span {
    display:block;
    text-align: center;
}

我还有一些<a> css，但我认为这不是问题..

a:link {
    text-decoration:none;
}
a:visited {
    text-decoration:none;
}
a:hover {
    text-decoration:none;
}
a:active {
    text-decoration:none;
}

如果您将鼠标悬停在第一个文本上，出现的框不会覆盖第二个文本。 基本上文本总是第一个，框在它下面。

我该如何解决这个问题？这很重要，否则我的设计将无法工作。 非常感谢。

Answer 1

添加一个大的z-index样式，这些决定了html对象的层级。

<a href="#" style="z-index:9999998;">Hover Me!<span class="tooltip">Hello, World!</span></a><br>
<a href="#">Hover This!<span class="tooltip">Hello, People!</span></a>