IE6 悬停问题

Posted

技术标签:

【中文标题】IE6 悬停问题【英文标题】:IE6 Hover Issue 【发布时间】:2011-02-03 23:48:00 【问题描述】:

CSS :hover 在 IE6 中不适用于非链接元素。有解决方法吗?例如如何将:hover 应用于div

【问题讨论】:

类似这个***.com/questions/1900768/… 【参考方案1】:

有whatever:hover。我自己从未使用过它,但据我所知,它运作良好。

Whatever:hover 是一个小脚本,它可以自动修补 :hover、:active 和 :focus 用于 IE6、IE7 和 IE8 的怪癖,让您可以像在任何其他浏览器中一样使用它们。版本 3 引入了 ajax 支持,这意味着通过 javascript 插入到文档中的任何 html 也将在 IE 中触发 :hover、:active 和 :focus 样式。

【讨论】:

没有css替代品吗? @Sarfraz 据我所知,不,否则无论如何:悬停和其他解决方法都不存在。 +1,我一看到标题就想到了。不管是什么:悬停遍历样式表,将伪类转换为类名并附加所需的事件处理程序。【参考方案2】:

您可以使用来自 Dean Edwards 的著名 IE7.js,它有一个很好的优势,您可以在 CSS 中使用 :hover 选择器。

除此之外,我怀疑您是否可以仅使用 CSS 来实现它。 IE 可以通过 expression() 处理 CSS 文件中的 JS,但是如果你发现我的想法,你就无法在没有选择器处理悬停的情况下使用表达式来处理悬停。

然后,最后,一个简短的 jQuery 解决方案:

$(document).ready(function () 
  $('div').hover(function () 
    $(this).addClass('hover');
  , function () 
    $(this).removeClass('hover');
  );
);

然后你可以在你的样式表中使用它:

div:hover, div.hover  ... 

【讨论】:

这个也是+1。仅支持 :hover 就太过分了,但是如果您想要所有额外的东西并且还不知道它,那就太好了。 @Andy E:是的,仅对:hover 来说这太过分了。实际上,大多数情况下,当答案以“您可以使用 jQuery 或这个......”开头时,这正是我当时评论的内容。 ;-) 然而,就像你提到的,在处理 IE6 时,我经常发现自己在很多不同的情况下都在考虑 IE7.js。【参考方案3】: 如果你只需要特定的 div 你没有使用 jquery 然后去 将 Suckerfis js 用作@futta 建议。http://www.htmldog.com/articles/suckerfish/ 如果您计划将来在更多标签上使用 Hover,并且不想每次都为此编辑 js,请使用 IE6 中的 Whatever.htc。正如@Pekka 建议的那样。
Suckerfish vs. .htc

IIIIN 我们拥有的蓝色角落 Suckerfish,原来的轻量级, 可访问,跨浏览器, 符合标准:悬停模仿。 IIIIN红色角落我们有'.htc' - 通过 CSS 访问的 JavaScript 文件 模仿:悬停。

叮叮!

Suckerfish 立即重重地降落 打击 .htc 的有效性 - .htc 简单 不是符合标准的 CSS。

Oooo... .htc 偷偷摸摸地戳戳 无需额外的 选择器...

Suckerfish 在圆环周围弹跳。 他的体重比他的轻很多 对手。

还有哦! IE 5.0 上勾拳!那是 .htc 没有的东西 做事的技巧,而 Suckerfish 可以无缝运行 IE 5.0。

.htc 晕了!比赛是 超过! Suckerfish 在积分上获胜!将军澳!

如果您还想从其他方面(除了悬停)获得好处 IE 然后按照@Boldewyn 的建议选择IE7.js 如果你已经在使用 jquery 并想在有限的范围内使用悬停 方式然后去这种方式: How to enable hover on a div for IE6 using jquery in minmal code?

在 IE6 中没有可用的纯且有效的 CSS 解决方案。

一个无效的 CSS 表达式解决方案可用 但我不建议使用 这个because it's slow

解决方案:http://www.visibilityinherit.com/code/ie6-hover-expression.php

【讨论】:

对于我的要求,suckerfish 解决方案就足够了。【参考方案4】:

suckerfish and it's offspring 也为此目的提供了出色的轻量级替代品。

【讨论】:

以上是关于IE6 悬停问题的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript IE6 - :悬停修复(shover) - 简化

IE6-:悬停修复(铲)-简化

IE8 上的鼠标悬停/悬停效果缓慢

IE6 选择器问题

使用 jQuery.support 检测 IE6

在网页制作中,怎么把图片应用为动态HTML效果?当鼠标悬停时图片1换成图片2,要怎么设置?