前端hover

作者: 星空无痕 | 来源:发表于2023-02-23 19:50 被阅读0次

1.hover的定义

:hover在鼠标移到链接上时添加的特殊样式

:hover适用于任何元素

2.hover的使用方法

用法1:控制自身的样式

鼠标悬浮在元素上改变元素样式,改变本身的背景颜色;

用法2:通过hover控制其他块的样式;

(1)控制子元素的样式 :

‘>’ 控制子元素,子元素选择器使用大于号">"做为连接符

子元素选择器只能选择作为某元素子元素的元素

例如:item是父元素,第一个p是其子元素,所以son的字体会标红.(注意:son1和son2外面还包着一层,所以这个是不生效的)

  (2) 控制后代元素的样式 :

‘ ’ 控制后代元素

父元素与子元素必须用空格隔开,从而表示选中某个元素下的子元素

例如:item是父元素,只要是item里面的p都会被选中,所以son,son1,son2的字体都会被选中,变红色字体

理解:子选择器只作用于其第一代元素,而后代选择器作用于N(N为自然数)代元素

(3)控制兄弟元素的样式 :

‘+’ 控制同级元素(兄弟元素)

选择的是item-son紧跟着后面的span元素,是递进的关系,是该兄弟元素与其相邻

(4)控制就近元素的样式 :

‘~’ 控制就近元素

改变其指定的兄弟元素,两个元素相不相邻都行。

相关文章

  • css移动端:acitve效果的实现

    做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮...

  • css3-伪类选择器使用

    web前端同学都需要清楚伪类选择器的使用。像:link,:visited,:hover,:active,:focu...

  • 关于鼠标悬停事件的七种用法

    最近写网页前端的过程中,发现会经常用到伪类的使用,如:link,:visited,:hover,:active,:...

  • CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及 标签的:link、v...

  • js找弟弟

    hover之后动画效果 我们可以在需要hover的元素hover之后用::after {content:''; d...

  • 漪涟波纹效果 css3 animation

    前端入坑纪 62 今天来分享 一个类似水波纹扩散的鼠标hover效果 好,详解如下! OK,first thing...

  • 小程序学习过程中遇到的问题 整理1

    view标签下hover必须为true时,设置hover-class才有效,hover-start-time和ho...

  • img:hover闪烁问题

    最近项目做首页,上面很多图片导航需要hover效果,使用css的:hover选择器发现加载hover图片时会闪烁,...

  • 伪类hover的进阶用法

    伪类在各位前端攻城狮的眼里肯定不陌生,但是你以为hover伪类只能修改当前元素本身?那你就错了,来看看吧! :ho...

  • 前端特效收集器

    前端特效收集器 近20个绚丽实用的jQuery/CSS3侧边栏菜单 9种css3圆形按钮hover鼠标经过动画效果...

网友评论

    本文标题:前端hover

    本文链接:https://www.haomeiwen.com/subject/hwrtldtx.html