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;
}
目录
相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
7天前
|
XML 前端开发 数据格式
css元素
【4月更文挑战第20天】css元素
16 4
|
10天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
11 0
|
16天前
|
前端开发
|
19天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
23天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
21 9
|
24天前
|
前端开发
css伪类伪元素都有哪些区别是什么
css伪类伪元素都有哪些区别是什么
9 0
N..
|
1月前
|
前端开发 UED
CSS伪类和伪元素
CSS伪类和伪元素
N..
7 0
N..
|
1月前
|
前端开发 容器
CSS 网页布局元素
CSS 网页布局元素
N..
23 1
|
1月前
|
前端开发 UED 容器
CSS3美化网页元素
CSS3美化网页元素
10 0