Question

I’m designing a html page with strict doctype and there’s a form element in my page.

What I want to do is to change background-color of inputbox when mouse touches my form. I’ve done this with css :hover selector on form tag, but problem is that IE only understands hover on “a” tag!

I’ve googled my problem and what I found is to:

• using an htc file;
• using javascript to create a hover class on elements;
• creating a big “a” tag and put all elements inside it;

but I don’t want to do any of these solutions!

Isn’t there any better way to fix this problem in IE?

My HTML Code:

<form id="footer-search-form" title="Search" action="#action">
    <fieldset>
        <input type="text" class="footer-search-input" id="q" name="Search"></input>
        <input type="button" class="footer-search-button" title="Search" value="Search"></input>
    </fieldset>
</form>

My CSS Code:

#footer-search-form:hover  .footer-search-button { background-color: #fff; }
#footer-search-form:hover  .footer-search-input { background-color: #fff; }

Update: and after hours of searching I did it by using js:

onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"

and

.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */

I hate it, but it seems that there’s no better way…

Answer 1

IE has supported :hover on any element since IE8 (or even IE7? I don’t remember), which has been released for over three years. Admittedly far too many people still use IE6 (mostly because IE doesn’t have an auto-updater – it really needs one), but for something as simple as this aesthetic effect you really don’t need to worry about support in old relics.