您现在的位置是:首页 > Javascript
当前栏目
CSS中hover出现不生效的几个原因 ?
2023-02-25 18:20:42 时间
在设置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 之前了;
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项