css: creating an image “hover” effect using only css
Most of us have at one time or another have had to (or tried unsuccessfully to) alternate an image on mouse over. Most commonly, this is effect is used to provide a response when a visitor runs their mouse over a button, like the one below:
Now, this was very easy to create, using just the following CSS:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}and the following html:
.buttonexample:hover{background-image: url(images/button-over.gif);}
<div class="buttonexample"></div>
If you are just hoping to make a standard image change on mouseover, without having that image link to anything, then you are almost done. To prevent the hover image from “flashing” before loading, simply follow the steps listed on our sister article: A quick look: preloading images with css.
If, however you would like to have a mouseover effect on a linked image, it’s just a little bit more complex. In addition to the code above, we will add one more line to make this:
.buttonexample{background-image: url(images/button.gif); width:91px; height:28px;}and the following html:
.buttonexample:hover{background-image: url(images/button-over.gif);}
.buttonexample a{display:block;width:91px;height:28px;}
<div class="buttonexample"><a href="#"></a></div>
This is the simplest method, but is not compatible with IE 5.5/6. This is because IE 5.5 and 6 do not recognize the “hover” attribute when applied directly to a DIV. To make this button compatible, we’ll just need to define the same variables as we did on the standard div, but for the “a” tag, like this:
.buttonexample a{background-image: url(images/button.gif); display:block;width:91px;height:28px;}
.buttonexample a:hover{background-image: url(images/button-over.gif);
Now, we have this link. Remember to change the width and height of this link to correspond with the size of your image.
Compatibility:
This method has been tested in and is compatible with Internet Explorer 5.5 and 6 (see above), 7, Firefox (PC and Mac), Netscape and Safari (PC and Mac).
That’s all folks!
If you have an idea or article that you would like to contribute, send it on! We’re always looking for good, quality articles. Note that we will not republish an article that has been published elsewhere, so keep it original!
January 24th, 2008 at 4:04 pm
Nice article, you should check this one out as well, if you have not already.
http://www.alistapart.com/articles/sprites
February 2nd, 2008 at 10:31 am
Thanks for the heads up, and for the compliments! You have a great looking web site, by the way.
February 2nd, 2008 at 5:41 pm
Ah, no problem, and I appreciate the complement. I enjoy your site too, nice work. We should trade links?
August 3rd, 2009 at 1:33 am
Er,I following your steps,but it just work in "Firfox".How to make it work in IE6.0?
August 3rd, 2009 at 7:42 am
I feel very confused!!why this effect on your website is find.However,in my computer,it dosen't work ???
It is my writing code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 2.8" />
<title>无标题文档</title>
<style type="text/css">
.ba
{
width:85px;
height:25px;
background-image:url(image/baoti1.gif);
}
.ba:hover
{
background-image:url(image/baoti2.gif)
}
.preload{display:none;}
</style>
</head>
<body>
<div class="ba"></div>
</body>
</html>
====it just work in FireFox=====
August 3rd, 2009 at 8:10 pm
Hi Cici,
Towards the bottom of this article, we clarify how to have this function properly in Internet Explorer 6. Based on your example, you will want to change this:
.ba
{
width:85px;
height:25px;
background-image:url(image/baoti1.gif);
}
.ba:hover
{
background-image:url(image/baoti2.gif)
}
to this:
.ba a
{
display:block;
width:85px;
height:25px;
background-image:url(image/baoti1.gif);
}
.ba a:hover
{
background-image:url(image/baoti2.gif)
}
and in your HTML, change this:
to this:
<div class="ba"></div>
Hope this helps!
January 6th, 2010 at 6:08 pm
I got some problems with this one. I can’t get the hover image to show, however everything else works just fine.
Here’s my code:
CSS:
.button-middle a{background-image: url(Button.png); display: block; width: 151px; height: 42px;}
.button-middle a:hover{background-image: url(Button hover (middle).png);}
XHTML:
Any help would be appreciated!
January 6th, 2010 at 11:11 pm
I'm having bit of a problem with my button. I can't get the hover image to show, however everything else works just fine.
Here's my code:
CSS:
.button-middle a{background-image: url(Button.png); display: block; width: 151px; height: 42px;}
.button-middle a:hover{background-image: url(Button hover (middle).png);}
XHTML:
<div class="button-middle"></div>
February 18th, 2010 at 1:54 pm
Hi Kentaro!
It may be that the comment editor broke your CSS, but otherwise it looks like the spacing in the image named "Button hover (middle)" may be the culprit. Have you tried resaving the image as Button-hover-(middle).png and adjusting your CSS accordingly?