a:hover在IE6中的BUG

哎，最近工作太忙，都好久没来写点东西了。

这也是最近工作中碰到的一个问题，其实以前也经常碰到过。具体是这样的，有一个图片链接，为了有明显一些的提示效果，需要在鼠标移上去的时候把它放大。按思路来说，其实是很容易的，只要在a:hover img{}里定义鼠标经过时改变图片的大小就可以了。但实际上，在IE6中，a:hover img{}里定义的内容并不生效。

IE6对伪类的支持真的很烂，除了A标签外其它标签都不支持:hover伪类，而偏偏这个唯一支持的a:hover也还有着BUG。解决的方法就是给a:hover {}定义一个属性：

a:hover {zoom:1;}/*这里可以换成其他很多的属性。*/
a:hover img {……}

在网上找出的答案基本上都是这样，的确这样能解决问题，但却都没有说这个BUG到底是为什么。最初我是以为是要触发layout，但经过试验，不能触发layout的属性也能生效，比如说color、border之类的。也就是这一次，我才找到此BUG的原因所在：当a:hover {}的属性跟a {}中的是一样的时候，也就是说a:hover没有发生属性的改变，完全继承a的属性的时候，就会产生此BUG。所以给a:hover {}定义一个属性值就能解决这个问题，至于定义什么值就看具体情况了，至少可以不用zoom这个看起来有hack嫌疑的属性咯。

Moondy 发表于 2009-8-16 4,014 Views | 类别: Xhtml/Css

10条留言立即发表评论

#1bluekevin @ 2009-8-19 09:00 回复

纯支持一把
呵呵
#2stri @ 2009-9-11 12:17 回复

a:hover{border: 0;}可以的
- Moondy @ 2009-9-11 22:32 回复
  
  对呀，这样也可以的。就是说跟a的定义要有所不同才能触发了
#3lingpaoren @ 2009-9-14 06:14 回复

谢谢老兄的博文呵呵偶的问题解决咯
#4匿名 @ 2010-3-19 17:01 回复
#5匿名 @ 2010-5-6 11:24 回复
#6卜卜口の @ 2010-7-24 08:38 回复

这个我好像有做过>_<
链接 asuka.tk/51847
- Moondy @ 2010-7-26 17:36 回复
  
  嗯，就是这个效果，不过实现方法跟我的有点不太一样。思路挺好的。
#7web前端寒风 @ 2010-8-25 09:09 回复

我试过a:hover{}设置zoom;padding 才有用，而color等之类的不行，不知道为什么？
#8ipaper @ 2011-4-21 21:33 回复

还以为是IE6不支持a:hover img {}这样的选择器呢
我是针对IE6用js写一个mouseover和mouseout来模仿a:hover这样的效果