Hover property of a button in IE

Factual Questions
1

Any idea how I can get the hover property of a button to work in IE? I can get it to work just fine in Fire Fox but it doesn’t seem to like it here. I know that IE initially only reacts to the hover property of a link but I thought there was a way to get it to recognize a button. Any ideas?

2

Can you be more specific about button? Do you mean INPUT TYPE=“button”?

Also, can you paste the CSS you’re using for the hover? IE is particular about the order.

3

here is what I’m doing.

I’m treating an image like a button and upon hover, rotating the order.

#button1 { position: absolute; }
#button1 a img {
position: absolute;
left: 4px;
top: 5px;
width: 200px;
height: 100px;
border: 0;
}
#button1 a img.primary { z-index: 1; }
#button1 a img.rollover { z-index: -1; }
#button1 a:hover img.rollover { z-index: 2;border-bottom:2px solid #ff6600; }

4

I just realized what I wrote and I’m completely wrong. They are only “buttons” by name. They aren’t REAL button.

5

Seems a strange way to do it… why not something like this (and stop using IDs when you want to use classes):

.hoverButton { height:50px; width:200px; font-size:0px; background-image:url(whatever.gif); }
.hoverButton:hover { background-image:url(whateverHover.gif); }

<a href=“link.html” class=“hoverButton”>click here!</a>

Haven’t tested it, but it should work right?

6

lol. Ok.

I’ll give it a try.

7

You may want to look here.

Also, there is a specific order for link states; see Online Training Materials

8

Okay, I did a little tinkering, and this works beautifully in IE6 (don’t have access to 7 right now), Safari, Firefox 1.5 and 2. Enjoy. There’s a little extra and a little repetitive markup, but it gets the job done in much less code than a lot of the tutorials and examples I’ve seen.

<style>
.hoverButton { }
.hoverButton a { height:50px; width:200px; display:block; background-image:url(whatever.gif); }
.hoverButton a:hover { height:50px; width:200px; background-image:url(whateverHover.gif); display:block; }
</style>
</head>

<body>
<div class=“hoverButton”>
<a href=“link.html”>click here!</a>
</div>

9

aweasome, wasson! Once again you’ve come to my aide.

10

Not a problem… you may need to play with the .hoverButton class to get it to blend into your page properly, but that should do it in semantically correct markup!

Just stop using those pesky IDs… it’ll be a pain your butt if you ever need to sprinkle JavaScript in there.