3

我正在尝试在 css 中使用工具提示，它正在工作，但是当工具提示出现时我遇到了问题，因为 p 标签中的文本显示在我想显示在所有内容上的跨度内容“工具提示”上. 我一直在尝试使用 z-index，还定义了所有标签中的位置，但无法理解为什么它不起作用。我会感谢有关如何解决它的任何提示。

我有下一个 html 结构

 <div>
        <a class="tooltip">
            <p>Test1</p>
            <span>saassa</span>
        </a>
    </div>

和CSS：

a.tooltip {
    outline: none;
    text-decoration: none;
    border-bottom: dotted 1px blue;
    display: inline;
    position: relative;
    padding: 0;
    background: none repeat scroll 0 0 #bcd9db;
    z-index: 20;
}

a.tooltip p {
    margin-bottom: 0px;
    display: inline;
    color: #006565;
    position: relative;
    z-index: 20;
}

a.tooltip > span {
    width: 25em;
    padding: 10px 20px;
    margin-top: 20px;
    margin-left: -85px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    position: absolute;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    color: #000000;
    background: #FBF5E6;
    border: 2px solid #CFB57C;
    z-index: 1000;
}

a.tooltip:hover > span {
    opacity: 1;
    text-decoration: none;
    visibility: visible;
    overflow: visible;
    margin-top: 50px;
    display: inline;
    margin-left: -260px;
    background: #fbf5e6;
    position: absolute;
    z-index: 100000;
}

我已经加载到 Fiddle，所以您可以看到它，只需将鼠标悬停在前三个链接中的任何一个上，您就会看到无法看到 div 的所有内容。 http://jsfiddle.net/mtzcq/3/

非常感谢你

4

3 回答 3

3

z-index从a.tooltip和中删除a.tooltip p。

http://jsfiddle.net/mtzcq/7/

这在 Firefox for Mac 中对我有用

于 2012-11-05T17:51:57.650 回答
1

En el código html tienes que quitar dentro del span losH6

于 2012-11-05T17:51:29.690 回答
1

删除所有“Z-index”实例，除了 a.tooltip > span 中的实例

于 2012-11-05T18:14:25.467 回答