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

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

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

 

样式为

<style>
div{
	
	background-color:red;
	width:100px;
	height:100px;
}
</style>

 添加hover样式

<style>
	div{
		background-color:red;width:100px;height:100px;
	}
	a:hover div{
		background-color:green;
	}
</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，所以修改后的代码为

<style>
	a div{
		background-color:red;
		width:100px;
		height:100px;
	}
	a:hover{
		border:none;
	}
	a:hover div{
		background-color:green;
	}
</style>
<a href="#"><div></div></a>

 

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

我们再用其他属性进行设置：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。

我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

 

总结：

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

1、a标签必须有href

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