Best Approach to Hover States on Form Buttons

HTML & CSS
1

I have some form button images that require hover states and the text has to be displayed that’s on the image.

Everything I find on Google is all many years old and I was wondering what technique is the best to use these days. Although IE6 support is required, I guess I could convince people that the hover state wouldn’t show in IE6 if this isn’t possible.

Any help would be greatly appreciated.

2

That was EXACTLY what I was looking for. THANKS!!

3

Hi,

Here’s an accessible input button replacement that works with images off. Ie6 gets hover via a small helper script.

http://www.pmob.co.uk/temp/input-rollover-test.htm

View source for the code and ask questions if you don’t understand anything :slight_smile:

4

I agree with the hover state, but it’s not my call and there’s no way to change it.

I need to use either the INPUT or BUTTON element (no ANCHORS that require JavaScript). Know of a good technique for this?

Maybe somehow using an <input type=“image”> then using CSS to change the hover state with a different background position?

5

:active was the class IE used before it recognised hover. Requiring hovering to see something is poor design imo. If you use it, please define :focus which is like hover but happens when you hit that element with the keyboard.

a:hover, a:focus {..}

is a good method to get into using