利用CSS hover伪类改变其他元素的总结
2017-08-25 17:37
886 查看
:hover 伪类经常用于页面的一些鼠标交互、链接点击变化,增强页面的用户体验,但是可以用来改变其他元素样式,可以在不使用JS 的情况下,达到想要的页面效果。
1、hover改变自身的效果:
鼠标悬浮改变样式:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/e049a27ea71dd93321c2cc10bd5e0ee6.gif)
HTML
CSS
2、hover改变子元素的样式
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/910e5145d1ed896356ebd40ad7ad7af6.gif)
HTML
CSS
hover直接可以批量改变内部元素的样式,这样的效果很多用在产品的展示页面,鼠标悬浮在页面的一个元素上,不同的产品图片实现位移,达到很好的交互效果。重要的一点,hover在父元素上,对子元素进行样式调整。
3、hover改变兄弟元素的样式:(需要在hover之后添加“+”)
HTML不变,变化的CSS部分
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/1877fadd25e1aedeb9a9109976797e29.gif)
可以看到,只有一个矩形应用到了样式,hover对兄弟元素改变样式,只对相邻的兄弟元素起作用。
总结一下:hover对同级别的元素改变样式,改变的是相邻兄弟元素的样式,即一个元素的样式;对元素的子元素应用hover改变样式,可以同时起作用。利用伪类改变其他元素的样式,其他元素须是hover元素的子元素。不当之处,请批评指出。
1、hover改变自身的效果:
鼠标悬浮改变样式:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/e049a27ea71dd93321c2cc10bd5e0ee6.gif)
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改变子元素的样式
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/910e5145d1ed896356ebd40ad7ad7af6.gif)
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); }
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/12/1877fadd25e1aedeb9a9109976797e29.gif)
可以看到,只有一个矩形应用到了样式,hover对兄弟元素改变样式,只对相邻的兄弟元素起作用。
总结一下:hover对同级别的元素改变样式,改变的是相邻兄弟元素的样式,即一个元素的样式;对元素的子元素应用hover改变样式,可以同时起作用。利用伪类改变其他元素的样式,其他元素须是hover元素的子元素。不当之处,请批评指出。
相关文章推荐
- css之hover改变子元素和其他元素样式
- 【笔记】css hover 伪类控制其他元素
- css:hover状态改变另一个元素样式的使用
- hover改变其他元素样式
- css的hover事件 鼠标滑过让该元素的子元素或者其他元素演示该表
- css hover控制其他元素
- CHROME审查元素如何查看hover伪类的CSS?
- CSS外级hover改变內级元素的display应用
- CSS实现某元素hover时 所有兄弟节点样式改变
- 学习笔记---css中伪元素与伪类(迷惑我的:after与:hover)
- 只用css可以hover一个元素的时候改变另一个元素的位置
- CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别
- 关于css中伪类及伪元素的总结
- CSS中hover改变子元素和其它元素样式
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧实现评论点赞
- 利用 hover 伪类创建纯 CSS 收缩面板
- 关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题
- css利用id和class来控制元素样式技巧总结