跨越不同风格的标签答案

【问题标题】：Span in a tag with different style跨越不同风格的标签
【发布时间】：2011-10-11 05:59:10
【问题描述】：

在我的 HTML 代码中，我有 a 标记，并继承了 span 标记。我现在的问题是如何实现链接元素中的文本在悬停时加下划线而跨度元素不加下划线？

HTML：

<a class="tooltip" href="#">
  Link, should be underlined on hover.
  <span class="custom info">Span, shouldn't be underlined on hover.</span>
</a>

CSS：

/* General settings */

a { color: black; text-decoration: none }
a:visited { color: black; }
a:hover { color: #1af; text-decoration: underline }

/* End */

.tooltip {
    position: relative;
}

.tooltip span {
    display:none;
    position: absolute;
    white-space:nowrap;
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 5px 5px rgba(0, 0,0, 0.1); 
    -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    font-family: Calibri, Tahoma, Geneva, sans-serif;
    margin-left: 0; 
    z-index: 1;
    text-decoration: none;
}

a.tooltip:hover span {
    display:block;
    text-decoration: none;
}

【问题讨论】：

为什么不把span放在a标签外面？
因为它充当工具提示，所以在用户将鼠标悬停在类工具提示上之前它是隐藏的。

标签： css hyperlink html text-decorations

【解决方案1】：

您可以添加另一个跨度（AKA HTML 的内联胶带）并将 :hover 样式移至该范围：

<a class="tooltip" href="#">
    <span class="hack">Link, should be underlined on hover.</span>
    <span class="custom info">Span, shouldn't be underlined on hover.</span>
</a>

还有：

a:hover span.hack { color: #1af; text-decoration: underline }
/*...*/
.tooltip span.info {
    /*...*/
    /* Remove text-decoration */
}
a.tooltip:hover span {
    display:block;
}

演示：http://jsfiddle.net/ambiguous/UWgcc/1/

您可能想要重命名 hack 类，我只是坦率地说。

如果您只想弄乱您的 .tooltip 链接，那么您可以将其添加到上面：

a:hover { color: #1af; text-decoration: underline }
a.tooltip:hover { color: #000; text-decoration: none }

演示：http://jsfiddle.net/ambiguous/UWgcc/2/

【讨论】：

感谢您的回答。但是我怎么能在a:hover span.hack { color: #1af; text-decoration: underline } 没有任何变化的情况下做到这一点？只留下a:hover？
@shub：你为什么不能改变那个 CSS？
因为我不会在每个链接上都设置这行代码。
非常感谢！现在完美了。

【解决方案2】：

更简单的解决方法

a:hover { color: #1af; border-bottom:1px solid #f0f; }

/* ...snip... */

a.tooltip:hover span {
  display:block;
  border-bottom:0;
}

删除文本装饰并将其替换为边框底部属性。

演示：http://jsfiddle.net/UBj76/

【讨论】：