首页 新闻 搜索 专区 学院

关于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效果?

流炎飞雪的主页 流炎飞雪 | 初学一级 | 园豆:6
提问于:2016-11-16 11:03
< >
分享
最佳答案
0

层叠次序

当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于 <head> 标签内部)
  4. 内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

 

你这个是样式的权重问题,你可以试试把{width:100px; height:100px; background:red;}放到内部样式中,或者放在一个外部样式表。反正hover和自身的样式必须是同级或者hover更高级。

奖励园豆:5
痞子Geeking | 初学一级 |园豆:9 | 2016-11-16 11:22

感谢你的回答,写的很详细,大赞!!

流炎飞雪 | 园豆:6 (初学一级) | 2016-11-16 13:50
其他回答(1)
0

你把div的行内样式去掉,放到style标签中

授之以渔 | 园豆:1100 (小虾三级) | 2016-11-16 11:08

感谢你的回答,解决了我的问题

支持(0) 反对(0) 流炎飞雪 | 园豆:6 (初学一级) | 2016-11-16 13:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册