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

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

修复。不能从子级覆盖text-decoration。此外，不要将<div> s放在<a> s中，正如Matt Ball所指出的那样。

Answer 3

当元素嵌套时，我无法阻止Chrome中出现下划线，但我可以通过使它们成为兄弟来解决问题。

只需从<a>标签中移除<div>，然后将其放在旁边，如下所示：

<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中不起作用。希望你不打算支持这个破旧的浏览器，对吧？