【问题标题】:Rounded rectange mousehover issue in IE6IE 6 中的圆角矩形鼠标悬停问题
【发布时间】:2011-04-09 02:17:57
【问题描述】:

我正在做这个扩展选项卡菜单,但翻转图像在 IE6 中不起作用。有没有简单的方法来修复它??

HTML

<ul class="menu">
<li class="active"><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
</ul>

示例文件张贴在这里.... Sample HTML

【问题讨论】:

  • 仅供参考 IE6 仅支持 :hover 在&lt;a&gt; 元素上,这里还有许多其他 IE6 错误,这使得这很难按原样解决。查看一些 .htc :hover IE 解决方案,可能会有所帮助(也许)。

标签: css internet-explorer-6


【解决方案1】:

问题出在这个选择器上:

.menu span:hover

不幸的是,虽然 IE6 确实支持 :hover 选择器,但它只支持 a 元素,所以 a:hover 有效,但 span:hover 不支持。

这是 IE6 中许多损坏和缺失的功能之一。

好消息是有一个 hack 可以让 IE6 支持任何元素的:hover。它叫做Whatever:hover

下载 .htc 文件并在您的样式表中添加对它的引用,如网站所述,它将解决这个特定的 IE6 问题。

说实话,这并不是 IE6 中唯一会伤害您的东西。如果可能的话,我的建议是放弃对 IE6 的支持。使用 IE6 的人数正在迅速下降,因此它的相关性越来越低(上次我检查时,它的浏览器市场份额不到 2%,而且每个月都在下降 25% 或更多——请参阅http://gs.statcounter.com/#browser_version-US-monthly-201003-201104)。只是不值得再支持了。

但话虽如此,如果这是您使用 IE6 时遇到的唯一问题,那么显然您应该使用whatever:hover hack——这几乎不费吹灰之力,而且它会解决这个问题,所以它显然值得它。

【讨论】:

  • +1,写得很好。比我在the same thing 的尝试要好。随便:hover ftw!
  • 在一定程度上同意“drop IE”的说法。定位或鼠标悬停并不完美===谁在乎。网站无法使用?可能需要注意。
【解决方案2】:

您已经有了一些解决方案,但是:

当您将鼠标悬停在跨度上时,您也将鼠标悬停在链接上,因此请尝试让链接处理跨度。那也会让 IE6 满意。

a:hover span { }

【讨论】:

  • 感谢 Erik...不知道我是怎么错过的.. :-)
【解决方案3】:

我之前遇到过这个问题,但我不记得它是否适用于 IE 6.0。简短的回答是您需要定义其余相关的伪类:http://www.w3schools.com/css/sel_hover.asp

注意::hover 必须在 CSS 定义中的 :link 和 :visited (如果它们存在)之后才能生效!

尝试定义所有 4 个伪类,即使它们是空白的。

a:link    {}
a:visited {}
a:hover   {color:red;}
a:active  {} 

如果一切都失败了,那么只需使用 jQuery 的 .hover() 函数: http://api.jquery.com/hover

【讨论】:

    猜你喜欢
    • 2015-11-12
    • 1970-01-01
    • 2013-11-28
    • 1970-01-01
    • 1970-01-01
    • 2016-08-18
    • 2012-05-10
    • 1970-01-01
    • 2023-03-12
    相关资源
    最近更新 更多