CODEWITHSUNDEEP
htmlcss
Ibanez
Ibanez

Reputation: 239

Different Background Images For Each List Item Navigation?

I would like to use images for navigation names and change the image for each menu item on hover. What is the best approach for doing this? An example would be great. Each list item would have it's own image for normal, active and mouse over.

I'm trying to make the menu names look like they are being pushed in on mouse over.

Upvotes: 0

Views: 3429

Answers (2)

Ben
Ben

Reputation: 764

I got this jsfiddle rigged up for you. It involves the background-image property and the :hover and :active css selectors. You can read up on those here.

It's recommended for this though that you read up on sprites instead of using individual images though, for performance reasons.

Upvotes: 2

justanotherhobbyist
justanotherhobbyist

Reputation: 2192

It is easy to do with css, just put :hover after the element you want to change. I did a very quick example without trying the code, so I'm sorry if it doesn't work, but you get the drift.

The HTML:

<ul>
<li class="link1"><a>Link 1</a></li>
<li class="link2"><a>Link 2</a></li>
<ul>

The CSS:

li.link1 {
background: url('img/link1_normal.png');
}

li.link1:hover {
background: url('img/link1_hover.png');
}


li.link2 {
background: url('img/link2_normal.png');
}

li.link2:hover {
background: url('img/link2_hover.png');
}

Upvotes: 4

Related Questions