利⽤CSShover伪类改变其他元素的总结
:hover 伪类经常⽤于页⾯的⼀些⿏标交互、链接点击变化，增强页⾯的⽤户体验，但是可以⽤来改变其他元素样式，可以在不使⽤JS 的情况下，达到想要的页⾯效果。
1、hover改变⾃⾝的效果：
⿏标悬浮改变样式：css鼠标点击样式
HTML
<div id="yanshi">
演⽰
</div>
CSS
      　#yanshi{
width: 100px;
height: 100px;
transition: background-color 0.5s,color 0.5s;
text-align: center;
margin: 20px auto;
line-height: 100px;
border: 1px solid green;
}
#yanshi:hover{
background-color: green;
color: white;
}
2、hover改变⼦元素的样式
HTML
<div id="fir">
<div class="se"></div>
<div class="se"></div>
<div class="se"></div>
<div class="se"></div>
<div class="se"></div>
<div class="se"></div>
<div class="se"></div>
</div>
CSS
#fir{
width: 820px;
height: 300px;
border: 1px solid green;
margin: 5px auto;
}
#fir div{
border: 1px dashed gray;
width: 100px;
height: 100px;
float: left;
margin: 5px;
transition: transform 0.5s;
}
div#fir:hover .se{
transform: rotate(15deg);
}
hover直接可以批量改变内部元素的样式，这样的效果很多⽤在产品的展⽰页⾯，⿏标悬浮在页⾯的⼀个元素上，不同的产品图⽚实现位移，达到很好的交互效果。重要的⼀点，hover在⽗元素上，对⼦元素进⾏样式调整。
3、hover改变相邻兄弟元素的样式：（需要在hover之后添加“+”）
HTML不变，变化的CSS部分
#fir div:first-child:hover + .se{
transform: rotate(15deg);
}
效果：
或者：
#fir div:hover + .se{
transform: rotate(15deg);
}
可以看到，hover对兄弟元素改变样式，只对相邻的兄弟元素起作⽤。
4、hover改变后⾯兄弟元素的样式：（需要在hover之后添加“~”）（根据@提⽰）
#fir div:hover ~ .se{
transform: rotate(15deg);
}
2021.8.27更新：
实际上伪类也是CSS类，表⽰选中特定的元素，这些元素不通过class 、id选或者位置选定，⽽是通过⿏标的⾏为选中对应元素，例如hover，表⽰选中⿏标指针浮动在上⾯的元素。然后再根据选中元素的位置定位其他元素，这样就很好理解上述的四种⽰例。
1、第⼀种利⽤hover选中⾃⾝元素，再对该元素应⽤transition效果；
2、第⼆种利⽤hover选中⾃⾝元素，再利⽤后代选择器选中后代元素；
3、第三种利⽤hover选中⾃⾝元素，再利⽤相邻兄弟选择器选中相邻元素；
4、第四种利⽤hover选中⾃⾝元素，再利⽤兄弟选择器选中后⾯兄弟元素。
伪类选择器与普通class、id、位置选择器使⽤，并⽆异同。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。