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

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

• • 前言
  • hover改变元素自身样式
  • hover改变子元素样式
  • 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;
}