在a:hover中改变子标签内样式的注意

a内有个div，需要当a hover的时候，div改变背景色，此只是个demo，只说明原理和注意事项

Html代码

<a><div></div></a>  

样式为

Java代码

1.<style>  
2.div{  
3.      
4.    background-color:red;  
5.    width:100px;  
6.    height:100px;  
7.}  
8.</style> 

添加hover样式

Java代码

1.<style>  
2.    div{  
3.        background-color:red;width:100px;height:100px;  
4.    }  
5.    a:hover div{  
6.        background-color:green;  
7.    }  
8.</style>  

 这里在firefox中已经可以实现了，但IE6却无效果（IE7理论上可以，未亲测，这应该属于CSS1的BUG，而IE7支持CSS2）

这里必须注意，IE6中认定一个标签是a，必须在a标签内加入href，如果无，IE6会将a作为p或者什么来处理。

另外必须添加a:hover属性，该属性不能与a相同，如果无，IE6认为该a标签hover时未变化，不会执行hover，同样也不会执行a:hover div，所以修改后的代码为

Java代码

1.<style>  
2.    a div{  
3.        background-color:red;  
4.        width:100px;  
5.        height:100px;  
6.    }  
7.    a:hover{  
8.        border:none;  
9.    }  
10.    a:hover div{  
11.        background-color:green;  
12.    }  
13.</style>  
14.<a href="#"><div></div></a>  

注意：并不是所有属性都能替换上面的borer:none;引用别人的测试结果

Java代码

1.我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。  
2.  
3.我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

总结：

要让IE6能实现内部标签样式也能变化，必须满足

1、a标签必须有href

2、a和a:hover必须有不同