How do I make the background image change on hover, for my span?
Suppose I have a span:
<span class="myspan"></span>开发者_JAVA技巧
.myspan{
background: url(image.png) top left no-repeat;
}
How do I make it so that when people hover my span, it shows "image_hover.png"?
.myspan:hover{
background-image:url('image_hover.png');
}
But what you really would want to do is make one image with both states, natural state and hover state, one beside the other. Then you would have:
.myspan{
width: *the width of only one state. aka half the width of the whole image*
background:url('image.png') top left no-repeat;
}
.myspan:hover{
background-postion:right;
}
That way only one image is loaded and on hover, it just moves it left to right. Displaying only one half of the image.
You can apply the :hover pseudo class to every element:
.myspan:hover
{
background-image: url(image_hover.png);
}
Internet Explorer 6 won’t care … but who cares about IE 6? :)
Alex,
You can try
.myspan:hover{background:url('image_hover.png') top left no-repeat;}
You can also combine image.png and image_hover.png into one png image and simply move the position on hover. Your png would look like this: http://www.missgoodytwoshoes.com/images/nav_shop.png
And your code would look like this:
<span class="myspan"></span>
.myspan{
background: url(image.png) top left no-repeat;
height: 37px;
}
.myspan:hover
{
background-position:0 -37px;
}
Use the :hover pseudo class:
.myspace:hover
{
backbround: url(image-over.png) top left no-repeat;
}
精彩评论