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>

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

1 个答案: