#css#如何使用hover,实现父对子的样式改变?
2024-09-06 23:12:00
思路及做法:
鼠标移动到父盒子的时候,
里面所有的子盒子的样式都发生变化的,
只需要直接在hover后面加上空格,
并且加上子盒子的类名 ,里面再写其他样式
.父盒子的类名:hover .子盒子的类名 {
//这里写鼠标移入到父盒子里面,子盒子要发生的样式变化
}
温馨提示,遇到父盒子里面的子盒子过多时,可以采取简写的形式:
以下为简写形式:
<div class="btn">
点击
<i class="el-icon-sort"/>
</div>
.btn {
background: #ccc;
display: inline-block;
padding: 8px 15px;
cursor: pointer;
&:hover {
color: blue;
i {
color: red;
}
}
}
最新文章
- GIT/node使用
- Spark在Ubuntu中搭建开发环境
- 【转】UML类图与类的关系详解
- 获取$(this)子节点对象的方法
- java开发环境
- Eclipse快捷键大全(转载)
- [No000055]教你早晨清肠、除口臭、色斑、大肚腩
- 【POJ 2482】Stars in Your Window
- 一个web页面的访问的过程
- MonoDevelop Debug Unity
- 对apply和call的理解
- SQL Server 2008 表值参数用法
- c/c++读取文件
- C语言初学 求100到200的全部素数
- iOS 获取系统目录
- Asp.net MVC4 下二级联动
- DateUtil日期工具类
- Centos7离线安装redis
- vant - 头部 - header【Layout 布局】【Icon 图标】
- 05机器学习实战之Logistic 回归scikit-learn实现
热门文章
- 传统 API 管理与测试过程正面临严峻的挑战
- 【一本通提高树链剖分】「ZJOI2008」树的统计
- 【ASP.NET Core】选项类的依赖注入
- Nginx 目录结构、Nginx服务控制命令
- 分享俩个js数组比较少用的方法join与from
- 关于奉加微PHY62xx系列如何选型?PHY6222/PHY6212/PHY6252
- Luogu3594 [POI2015]WIL-Wilcze doły (双端队列)
- SpringBoot接收MultipartFile文件,并保存文件
- 贪吃蛇(C语言版)链表实现
- 关于 Math.random()生成指定范围内的随机数的公式推导