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: Calibri, 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:And:
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:Demo: http://jsfiddle.net/ambiguous/UWgcc/2/