:hover选择器控制另一个元素
情景一:控制兄弟元素
方法:
:hover+
【:hover选择器控制另一个元素】*只能顺序为下一位的兄弟级元素,例如
你们好
你好啊
你也好啊.one,.two,.three{
width: 200px;
height: 200px;
border: 1px solid black;
}
.one:hover+.two{
background-color: yellow;
color: green;
}/* 有效 */
.one:hover+.three{
background-color: yellow;
color: green;
}/* 无效 */
.two:hover+.one{
background-color: yellow;
color: green;
}/* 无效 */
情景二:控制子元素
.parent:hover .child{
background-color:red;
}
情景三:控制兄弟元素的子元素
.first:hover+.secand .son{
background-color: blueviolet;
}
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 我的拖延症如何控制了我,又一次
- 真正的爱
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 每天听本书《控制焦虑》
- javascript|javascript 性能测试笔记
- 控制自己的心为什么这么难([追光日记(第2篇)])
- 《不要用爱控制我》
- 8、Flask构建弹幕微电影网站-搭建后台页面-密码修改、主页控制面板
- Promise|Promise 异步控制流