Comments on: css: creating an image “hover” effect using only css

By: dynamixlabs

dynamixlabs — Thu, 18 Feb 2010 13:54:53 +0000

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?

By: Kentaro

Kentaro — Wed, 06 Jan 2010 23:11:41 +0000

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:

By: Kentaro

Kentaro — Wed, 06 Jan 2010 23:08:48 +0000

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!

By: DynamiXLabs

DynamiXLabs — Mon, 03 Aug 2009 20:10:49 +0000

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:

Hope this helps!

By: cici

cici — Mon, 03 Aug 2009 07:42:08 +0000

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:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">

http://gmpg.org/xfn/11">

无标题文档

====it just work in FireFox=====

By: cici

cici — Mon, 03 Aug 2009 01:33:36 +0000

Er,I following your steps,but it just work in "Firfox".How to make it work in IE6.0?

By: Matt

Matt — Sat, 02 Feb 2008 22:41:13 +0000

Ah, no problem, and I appreciate the complement. I enjoy your site too, nice work. We should trade links?

By: DynamiXLabs

DynamiXLabs — Sat, 02 Feb 2008 15:31:17 +0000

Thanks for the heads up, and for the compliments! You have a great looking web site, by the way.

By: Matt

Matt — Thu, 24 Jan 2008 21:04:57 +0000

Nice article, you should check this one out as well, if you have not already.

http://www.alistapart.com/articles/sprites