CODEWITHSUNDEEP
htmlcssinternet-explorer-6
Farid Rn
Farid Rn

Reputation: 3207

css hover on elements issue in IE

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:

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...

Upvotes: 1

Views: 262

Answers (2)

Wex
Wex

Reputation: 15695

You're really only going to run into trouble if your users are using IE6. The majority of web developers nowadays don't even bother providing support for such an old browser, so I wouldn't worry about it.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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.

Upvotes: 0

Related Questions