Question

我正在尝试创建一个纯css工具提示。我在这里有测试代码：http://jsfiddle.net/RBdn4/

唯一的问题是，在Chrome中，尽管在css中有text-decoration: none;行，但文字在工具提示上加下划线。

有关如何停止此操作的任何建议？该链接应该加下划线，但.tooltip文字不应该。

Answer 1

Chrome会将链接的text-decoration应用于<div>，因为它是<a>的孩子。

在<a>周围添加一个包装元素，并使工具提示<div>成为兄弟，而不是<a>的孩子。当包装器为:hover时显示工具提示。

哦，让CSS有意义！

HTML

<span class="wrap">
    <a href="#">this is text</a>
    <div class="tooltip"> this is a tooltip</div>
</span>

CSS

.tooltip {
    color: #000000;
    display: none;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

span.wrap:hover .tooltip {
    display: block;
}

演示：http://jsfiddle.net/mattball/u66GT/

Answer 2

Fix'd。您无法覆盖孩子的text-decoration。此外，请不要将<div>放入<a> s，因为 Matt Ball 指出。

Answer 3

当元素嵌套时，我无法阻止Chrome中的下划线发生，但我可以通过让它们成为兄弟姐妹来解决问题。

只需从<div>标记内删除<a>，然后将其放在旁边，就像这样：

<a href="#">this is text</a>
<div class="tooltip"> this is a tooltip</div>

并使用CSS +选择器（相邻的兄弟）选择悬停的工具提示，而不是子选择器。

.tooltip{
    display: none;
}

a:hover+.tooltip{
    color: #000000;
    display: block;
    left: 50px;
    padding: 10px;
    position: absolute;
    top: 40px;
    width: 250px;    
    text-decoration: none;
    z-index: 100;
}

原始对CSS的唯一更改是将空格更改为加号。

注意+选择器在IE6中不起作用。希望你不打算支持这个简陋的旧浏览器，对吗？

使用标记中的下划线创建css工具提示格式问题

3 个答案:

HTML

CSS

演示：http://jsfiddle.net/mattball/u66GT/