IE7 在悬停之前不会从导航中删除活动状态答案

【问题标题】：IE7 will not remove active state from navigation until hoverIE7 在悬停之前不会从导航中删除活动状态
【发布时间】：2010-12-07 12:19:47
【问题描述】：

该网站是http://greenvillenext.com/site（注意：请忽略疯狂的加载时间和一切，我已经知道了）。

这是怎么回事：点击主导航中的一个项目（顶部的五个链接）会给该项目一个“活动”类，当您点击另一个项目时，它会从该项目中删除活动类并添加它到新的。显然，这个活动类用于设置导航链接的样式，让您知道自己在哪里。

但是，在 IE7 中，单击导航中的不同链接并不会从先前活动的链接中删除活动样式，直到您将鼠标悬停在它上面，这似乎会重置它。

我在这里不知所措。我已经尝试过任何我能找到的 peek-a-boo hack（例如最小宽度：0），我已经为非活动链接设置了一个“非活动”类并设置了不同的样式，等等。似乎什么都没有让它重置，直到你在 IE7 中将鼠标悬停在它上面。

有什么想法吗？

【问题讨论】：

标签： jquery html css

【解决方案1】：

您如何定义悬停？最简单（也是最可靠的方法）是使用 jQuery。

$('.myNav').hover( function(){

$('.myNav').removeAttr //remove whatever styling hover causes
$(this).css //set the background/do hover animation

});

您需要一种方法来标记当前选定的选项卡并忽略它；你总是可以在元素上使用一些属性来标记这样的。我看到你的导航元素都是不同的类；我会为所有这些添加另一个类以便于分组。

致所有 jQuery 反对者：他已经在使用 jQuery-UI，所以添加 jQuery 插件是一个没有实际意义的问题。这将比任何 homerolled 解决方案更具可读性并且可能更有效。

【讨论】：

我只是在我的 CSS 中使用 :hover 伪类。是否有某些原因我不知道为什么应该在 JS 中完成悬停状态？
如果你想悬停任何不是锚的东西，你需要使用javascript来兼容IE。这也完全消除了跨浏览器 CSS 渲染问题的任何可能性。
不要认为是悬停导致问题。似乎 IE 不尊重“活动”类正在通过 JS 删除这一事实，并且直到您将鼠标悬停在它上面（它会重置它）才会意识到这一点。
您是否尝试过像我建议的那样在单击或悬停时删除活动类？ $('.myNav').removeClass('active');
它已经设置好了，因此单击任何导航元素都会从先前具有活动类的导航元素中删除活动类。悬停不应该与它有任何关系。对不起，如果我误解了你。

【解决方案2】：

事实证明，设计者为所有版本的 IE 启用了 DD_belatedPNG 而不仅仅是 IE6，这是罪魁祸首。

【讨论】：