CODEWITHSUNDEEP
htmlcss
Yarin
Yarin

Reputation: 183509

Underline part of hyperlink on hover

I have a compound hyperlink that contains two span elements, one of which I want to underline on hover, and the other not. A good example of this is the name / username link pair found at the top of Twitter tweets. I just can't figure out how they do it.

My attempt:

HTML: 

<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>​

CSS: 

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.caption:hover {
    text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}

​fiddle: http://jsfiddle.net/vgKSh/1/

Upvotes: 0

Views: 4814

Answers (6)

Ryan Erickson
Ryan Erickson

Reputation: 731

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:none;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}

Upvotes: 2

Timbadu
Timbadu

Reputation: 1551

a:hover span {
    text-decoration:none;            
}

a:hover .main{
    text-decoration: underline;            
}

Just as a style thing, I never use text-decoration but use border-bottom instead with a bit of padding.

Upvotes: 2

jnrbsn
jnrbsn

Reputation: 2533

Fiddle: http://jsfiddle.net/vgKSh/4/

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span.main {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}

Upvotes: 2

Ben McCormick
Ben McCormick

Reputation: 25728

Forked and fixed here: http://jsfiddle.net/CtD8M/

Just have the specific span a set to text-decoration underline, rather than setting globally

Upvotes: 2

Nick Rolando
Nick Rolando

Reputation: 26167

You almost got it. Put text-decoration:underline; in main class only.

a {
    text-decoration:none;
    font-weight:bold;
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}

http://jsfiddle.net/vgKSh/9/

Upvotes: 2

Pethical
Pethical

Reputation: 1482

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span{
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}
​

Upvotes: 4

Related Questions