CODEWITHSUNDEEP
htmlcsshover
Francesca
Francesca

Reputation: 28178

Border appear on hover

Trying to make a link display a border-bottom on :hover.

Here is the HTML. When you hover on Sign In you should see a 3px border on the bottom

<ul class="secondaryNavList signIn">
    <li class="logo"><img src="images/layout/bbclogo.png" alt="BBC"></li>
    <li class="signin"><a href="/signin">Sign in</a></li>
</ul>

This is the CSS for the hover 

nav.secondary li.signIn a:hover{
    border-bottom:3px solid #0f0;
}

Can't seem to get this working?

Upvotes: 0

Views: 73

Answers (3)

Asenar
Asenar

Reputation: 7030

js and css are case sensitive. change <li class="signin"> by <li class="signIn">

EDIT: http://jsfiddle.net/VAtD3/1/

Upvotes: 1

Lukas
Lukas

Reputation: 351

just check at the bottom of your CSS where you have:

nav.secondary li.signIn a:hover{
    border-bottom:3px solid #0f0;
}

rather use:

.signin:hover{
    border-bottom:3px solid #0f0;
}

This targets the link's class which then allows the hover action to fire.

Upvotes: 0

Krish R
Krish R

Reputation: 22741

Try this, In your html code you have used <ul class="secondaryNavList signIn">

.secondaryNavList a:hover{
    border-bottom:3px solid #0f0;
}

instead of 

nav.secondary li.signIn a:hover{
   border-bottom:3px solid #0f0;
}

DEMO: http://jsfiddle.net/3zP2w/

Upvotes: 0

Related Questions