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;
}
目录
相关文章
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
移动端的打开方式,打开F12之后,就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box; 定宽度为多少就是多少,代码库,移动端
|
19天前
|
前端开发 容器
CSS对行级元素的影响
【7月更文挑战第4天】CSS对行级元素的影响
17 2
|
21天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
13 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
18天前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
12 0
|
18天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
18 0
|
21天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
26 0