css之伪类hover改变自身、子元素、其他元素的样式

简介: css之伪类hover改变自身、子元素、其他元素的样式


前言

有时候我们想在鼠标移动到元素上的时候,改变自身、子元素、其他元素的css样式,除了通过js事件的方式实现外,还可以通过纯css实现,即通过伪类hover改变自身、子元素、其他元素的样式

hover改变元素自身样式

<div class="father1">
  <div class="son1">子元素</div>
</div>
<div class="father1-brother">其他元素</div>
.father1:hover {
  background: #f2ee24;
}

hover改变子元素样式

<div class="father1">
  <div class="son1">子元素</div>
</div>
<div class="father1-brother">其他元素</div>
.father1:hover .son1 {
  background: #f2ee24;
}

hover改变其他元素样式

<div class="father1">
  <div class="son1">子元素</div>
</div>
<div class="father1-brother">其他元素</div>
.father1:hover +.father1-brother {
  background: #f2ee24;
}
目录
相关文章
|
3天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
1天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
2 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
1天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
5 0
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
2天前
|
前端开发
css实战——清除列表中最后一个元素的下边距
css实战——清除列表中最后一个元素的下边距
8 0
|
4天前
|
前端开发
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
css 超实用的:empty —— 隐藏空元素、缺失字段智能提示
4 0
|
4天前
|
Web App开发 前端开发
设计,兼容性----字体-------Css样式的字体,字体样式导入
设计,兼容性----字体-------Css样式的字体,字体样式导入
|
Web App开发 前端开发
|
11天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
11天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战