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;
}
目录
相关文章
|
6天前
|
前端开发
CSS元素隐藏的多种方式:让你轻松实现页面布局
CSS元素隐藏的多种方式:让你轻松实现页面布局
|
6天前
|
前端开发
particlesJS使用简介,CSS字体样式值
particlesJS使用简介,CSS字体样式值
|
7天前
|
前端开发
CSS优先级:如何解决样式冲突?
CSS优先级:如何解决样式冲突?
|
7天前
|
前端开发
css中如何解决绝对定位元素被遮挡的问题
css中如何解决绝对定位元素被遮挡的问题
33 3
|
7天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
18 1
|
8天前
|
前端开发 数据安全/隐私保护
利用 HBuilderX 设置CSS样式会员注册页面
利用 HBuilderX 设置CSS样式会员注册页面
14 1
|
8天前
|
前端开发
css结构伪类
css结构伪类
11 2
|
8天前
|
前端开发
|
前端开发 容器
css:整理9种元素水平垂直居中的方法
css:整理9种元素水平垂直居中的方法
124 0
css:整理9种元素水平垂直居中的方法