html - css 悬停在 IE 中的元素问题上

Question

我正在设计一个具有严格文档类型的 html 页面，并且我的页面中有一个表单元素。

我想做的是在鼠标触摸我的表单时更改输入框的背景颜色。我已经用 css 完成了这个:表单标签上的悬停选择器，但问题是 IE 只理解悬停在“a”标签上!

我用谷歌搜索了我的问题，发现的是:

• 使用 htc 文件；
• 使用 javascript 在元素上创建悬停类；
• 创建一个大的“a”标签并将所有元素放入其中；

但我不想做任何这些解决方案!

在 IE 中没有更好的方法来解决这个问题吗？

我的 HTML 代码:

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

我的 CSS 代码:

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

更新:经过数小时的搜索，我使用 js 完成了:

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

和

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

我讨厌它，但似乎没有更好的办法......

Answer 1

你真的只会遇到麻烦if your users are using IE6 .现在大多数 Web 开发人员甚至都懒得为这么旧的浏览器提供支持，所以我不担心。