关于css中的hover问题
0
[已解决问题]
解决于 2016-11-16 13:51
<!doctype html>
<html>
<head>
<style>
*{margin:0px; padding:0px;}
a:hover{color:orange;}
.div1:hover{background:orange;}
</style>
</head>
<body>
<a href="javascript:;">链接</a>
<div class="div1" style="width:100px; height:100px; background:red;"></div>
</body>
</html>
为啥div中就是实现不了hover的效果，:hover选择器不是适用于所有的元素么？如何实现div的hover效果？
最佳答案
0
层叠次序
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
你这个是样式的权重问题，你可以试试把{width:100px; height:100px; background:red;}放到内部样式中，或者放在一个外部样式表。反正hover和自身的样式必须是同级或者hover更高级。
奖励园豆：5
感谢你的回答，写的很详细，大赞！！
其他回答(1)
0
你把div的行内样式去掉，放到style标签中
感谢你的回答，解决了我的问题
