Currently, I am in the process of designing an HTML page with a strict doctype and have included a form element on this page.
My objective is to alter the background-color of an input box when the mouse hovers over my form. While I have successfully implemented this using the :hover selector in CSS for the form tag, I encountered an issue - IE only recognizes hover behavior on "a" tags!
After conducting some research online, I came across the following possible solutions:
- Using an HTC file
- Employing JavaScript to create a hover class on elements
- Wrapping all elements inside a large "a" tag
However, none of these solutions seem ideal to me.
Is there a more effective way to resolve this particular issue in IE?
Here is a snippet of 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>
And here is a glimpse at my CSS code:
#footer-search-form:hover .footer-search-button { background-color: #fff; }
#footer-search-form:hover .footer-search-input { background-color: #fff; }
Update: After extensive searching, I managed to achieve the desired effect by implementing a solution involving JavaScript:
onmouseover="this.setAttribute(document.all?'className':'class','footer-search-hovered');" onmouseout="this.removeAttribute(document.all?'className':'class','footer-search-hovered');"Additionally, I utilized the following CSS:
.footer-search-hovered .footer-search-input, .footer-search-hovered .footer-search-button { background-color: #fff !important; } /* For IE6 compatibility */
Although I am not fond of this workaround, it appears to be the most viable option currently available.