CODEWITHSUNDEEP
htmlcss
Someone
Someone

Reputation: 551

Image navbar hover

I have a navbar which displays a list of image links. I want to change the image based on hover and selection. This is my result:

enter image description here

html:

<li>
    <a href='' id='home' />
</li>

css:

nav li {
    display: inline-block;
    width: 128px;
    height: 128px;
}

nav li a #home {
    background-image: url('../images/home.png');
}

nav li a:hover #home {
    background-image: url('../images/home-hover.png');
}

nav li a:selected #home {
    background-image: url('../images/home-selected.png');
}

Why isn't this working correctly?

Upvotes: 0

Views: 209

Answers (3)

aperture
aperture

Reputation: 2895

Your css is looking for a child with id #home. It should be nav li a#home:hover{} etc.

You'll also need to set either block or inline-block as well as width/height on the a tag.

Example: http://jsfiddle.net/6HmLP/1/

Upvotes: 3

Daze
Daze

Reputation: 488

You need to close your a tag and include content: <a href='' id='home' />some text</a>

You should also display your a as a block or inline-block and give it a width and height so your background image can actually display as intended.

Also, your selectors are wrong. By saying a #home, you're looking for "any element with an id of home, which is a descendent element of a". Which doesn't exist in your HTML. Instead, you can target it with a#home which means "the a element that has an id of home".

Upvotes: 0

Fantasterei
Fantasterei

Reputation: 462

You need to address it like this:

nav li a#home { ... }
nav li a#home:hover { ... }

Upvotes: 0

Related Questions