当前位置: 动力学知识库 > 问答 > 编程问答 >

css - 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

网友答案:
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

网友答案:

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.

网友答案:

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;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: