在IE7+及FF浏览器中,:hover伪类可以用于任何对象,但在IE5、IE6中,:hover伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。
下面是一个鼠标悬停弹出层的代码:
--------------------------------------
<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}
#a:hover div
{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5
0px;}
</style>
<div id="a">点我吧<div>看到我了吧</div></div>
------------------------------------------
但此代码仅在IE7+及FF浏览器中有效,在IE5及IE6中无效,要使在IE5及IE6中也有效,则必须在外面包裹一个a标签,代码如下:
----------------------------------
<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}
a:hover #a div
{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5
0px;}
</style>
<a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>
---------------------------------------------------
但此时发现在IE5、IE6下仍然无效,原因是a:hover中的css属性必须要相对以前有所改变才能触发hover事件。例如可以增加一个a:hover{zoom:1}属性,
我们发现除了text-decoration,color,z-index不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性)外,其他属性均可以做为消除伪类:hover BUG的特定属性。
修正后的代码:
----------------------------------
<style type="text/css">
#a{width:100px;height:100px;background:red;position:relative}
#a div{display:none}
a:hover{zoom:1} //增添的为了触发hover的属性
a:hover #a div
{display:block;width:100px;height:100px;background:#000;position:absolute;top:50px;left:5
0px;}
</style>
<a href="#"><div id="a">点我吧<div>看到我了吧</div></div></a>
相关推荐
运用以上的代码可以使ie6支持li:hover的使用
在IE6中只兼容a:hover,要使用li:hover或div:hover,需引用一个文件使其兼容: csshover.htc(点击直接查看) 放在网站的根目录下,并在css文件(或者<style>标签)中,加上 复制代码代码如下: body { behavior:...
一般的JS代码只支持PNG图片的普通属性,但使用A:HOVER的时候背景透明就失效了。下面是支持A:HOVER的方式,IE6PNG透明支持a:hover源码,注意:使用此方法不能和其他PNG的JS一起使用
因为IE6里只有a才有houver属性,为了解决这个问题找了半天,最后找到一个最合适的,其它也不是li:hover.只是用事件改变class对IE6.0而言
hover”的支持不理想,对于类似的“p:hover”、“img:hover”、“#header:hover”...,今天给大家介绍一种新的方法,可以完美解决IE6不支持hover的情况,用法很简单,将下载后的“csshover.htc”文件,定义在body样式...
可解决在IE6中不支持hover的方法!
让ie6非A元素支持:hover的htc代码
完美解决IE6不支持hover的方法
相信对浏览器兼容问题折磨了很多同道中人,我这有个好东西可以帮大家解决这个郁闷。好东西当然还是要拿出来给大家一起分享~
Whatever:hover 是一个小小的脚本,它可以迅速、自动地为IE6,IE7,IE8添加标准的 :hover、:active 和:focus 伪类支持。第三版引入了 ajax 支持,意味着通过 javascript动态添加到文档中的任意html元素也同样可以在...
例如: CSS代码 a:hover{background:url(imagepath)} 常用的解决方案: 在页面底部添加以下IE6专用代码,让IE6缓存CSS背景图片至本地,这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 XML/HTML代码 ...
在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。
例如如下的代码: ...所以IE6的bug就是如果a 与 a:hover 的css定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如 a:hover{bo
ie6对a:hover子标签的解读是建立在父标签的hover设置上的,换句话说如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读,也就会出现ie6下a:hover设置失效的问题
ie6环境下好多的标签除a标签都不支持伪类:hover,本人很是疑惑,于是搜集整理一番,晒出来和大家分享,希望对你们有帮助
修复IE6下不能使用伪类Hover,通过此代码,可以直接不考虑IE6下的兼容性。只需要调用一个简单的文件即可。方便大家调试IE6下的兼容性问题。