CODEWITHSUNDEEP
htmlcsstags
Bad
Bad

Reputation: 9

html - image changing on li / a hover

I have encountered a very interesting problem about img src which change on a:hover.

SCREENSHOT

As you see, hovering the <a> sector,you cant see logically the white img. So I had the same icons on black and white, I want on hovering the sectors of #menu, the img src changes img links to black icons, instead of white, which are for only non-hovered sectors.

CSS+HTML: http://paste.laravel.com/KJ1

Upvotes: 1

Views: 3218

Answers (3)

AfromanJ
AfromanJ

Reputation: 3932

You could use background image sprites for this there is an article about sprites here: http://css-tricks.com/css-sprites/ this will also reduce server calls to get images as all images can be in a single file.

CSS Example:

ul li a{
   background: #000000 url('sprite.png') no-repeat;
}
ul li a:hover{
   background-color: #FFFFFF;
}

//then classes for each different link

ul li a.home {
   //white icon
   background-position: 0 0; 
}
ul li a.home:hover {
   //black icon
   background-position: 0 -20px;
}

Upvotes: 0

RbG
RbG

Reputation: 3193

ul li a{
 background:#000000 url(/path/to/white/icon) left no-repeat;
 background-color:black;
}
ul li a:hover{
 background:#FFFFFF url(/path/to/black/icon) left no-repeat;
}

try this one

Upvotes: 2

Ragesh Puthiyedath Raju
Ragesh Puthiyedath Raju

Reputation: 3939

Please see this below example. it's shows how to change the background image of li on mouseover event.

change background image of li on an a:hover

Hope it help.

Upvotes: 0

Related Questions