在我的 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;
}
最佳答案
您可以添加另一个跨度(又名 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 }
关于css - 跨越具有不同样式的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7721919/