CSS中hover出现不生效的几个原因 ?
CSS 出现 原因 几个 生效 Hover
2023-06-13 09:16:43 时间
在设置CSS的hover时,有时会发现hover不起作用,
总结一下原因:
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
1.在设置:hover前加空格:
比如:
<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one :hover {
background: #da56d0;
}
</style>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
发现鼠标经过class为one的时候背景不变,而经过one里面的其他div背景颜色发生变化,
说明:hover前加空格,本身不会有:hover的效果,而后代元素会有:hover的效果。
2.当鼠标经过时,让其他元素改变样式:
这时候你会发现,只有后代元素和兄弟元素(紧接在元素后的兄弟元素)才有效果,其他的:hover会失效
还是上个例子
把:
.one :hover {
background: #da56d0;
}
改为:
.one:hover .two {
background: #da56d0;
}
发现能达到我们想要的效果
改为:
.two:hover +.three {
background: #da56d0;
}
也能达到效果(注意把”+”号去掉,就不能达到效果了)
而改为:
.two:hover .four {
background: #da56d0;
}
3.类名写错了;
4.:hover 被置于 :link 和 :visited 之前了;
相关文章
- css绝对定位的参照物是什么_css 清除上定位
- 【说站】css中BFC是什么意思
- 【说站】CSS鼠标跟随的原理
- w3c css规范_jquery是w3c标准吗
- SAP UI5 index.html 根节点的 css 类填充逻辑
- 常用的HTML和CSS(content)特殊字符图标
- 一个初级前端结合css、div谈一谈屏幕尺寸、分辨率、缩放(显示文本、应用等项目的大小)概念
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 第8天:CSS布局入门
- 用div+css解决出现水平滚动条问题
- 网页编辑中CSS样式表技巧总结
- CSS控制图片大小-适应宽度
- CSS鼠标悬停菜单图片交换技术实现
- 纯js和css实现渐变色包括静态渐变和动态渐变