In my HTML code I have a
tag with a span
tag inherited. My question is now how can I achieve that the text in the link-element will be underlined on hover and the span-element not?
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: Calib开发者_如何学Pythonri, Tahoma, Geneva, sans-serif;
margin-left: 0;
z-index: 1;
text-decoration: none;
}
a.tooltip:hover span {
display:block;
text-decoration: none;
}
You could add another span (AKA HTML's inline duct tape) and move the :hover
styling to that:
<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>
And:
a:hover span.hack { color: #1af; text-decoration: underline }
/*...*/
.tooltip span.info {
/*...*/
/* Remove text-decoration */
}
a.tooltip:hover span {
display:block;
}
Demo: http://jsfiddle.net/ambiguous/UWgcc/1/
You'd probably want to rename the hack
class, I was just being honest with that.
If you only want to mess around with your .tooltip
links, then you could add this to the above:
a:hover { color: #1af; text-decoration: underline }
a.tooltip:hover { color: #000; text-decoration: none }
Demo: http://jsfiddle.net/ambiguous/UWgcc/2/
a much easier workaround
a:hover { color: #1af; border-bottom:1px solid #f0f; }
/* ...snip... */
a.tooltip:hover span {
display:block;
border-bottom:0;
}
removes the text decoration and replaces it with a border-bottom property.
Demo: http://jsfiddle.net/UBj76/
精彩评论