【前端 - CSS】第 16 课 - 伪类选择器（鼠标悬停状态）

最新推荐文章于 2025-06-13 14:41:51 发布

Aperion

最新推荐文章于 2025-06-13 14:41:51 发布

阅读量1.1w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_51870334/article/details/131119699

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

在 CSS 中，我们使用 hover 表示 该元素在鼠标悬停状态下的样式 。

2、伪类选择器

伪类依附于已存在的元素，使用冒号作为标识，描述元素在某特性或状态下的样式。工作中常用的伪类选择器如下：

选择器	作用
：hover	鼠标悬停状态
：active	鼠标点击（按下不放）时激活
：focus	获得焦点
：visited

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Aperion

关注关注

7
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

前端面经-CSS篇(三）---伪元素和伪类选择器

qq_44643806的博客

04-06

946

伪元素是 CSS 创建的“假元素”，它不是 HTML 中真实存在的标签，是一种由 CSS 创建出来的“虚拟元素节点”，它并不真实存在于 HTML 的 DOM 结构中，但浏览器在渲染时会像处理普通元素一样，把它插入进渲染树中。你可以用来添加一些装饰、内容、布局结构等。::before：用于在元素内容之前插入内容。::after：用于在元素内容之后插入内容。：用于选中文本内容的第一个字母。：用于选中文本内容的第一行。借助::before，我们可以实现很多“视觉增强效果”，无需在 HTML 中多加一层。

HTML中设置鼠标悬停状态伪类,CSS快速入门-鼠标悬浮(hover伪类)

weixin_35064481的博客

06-02

7761

一、概述hover伪类：在鼠标移到元素上时向此元素添加特殊的样式。比较普通的就是一个url，当你鼠标放上去后，会变颜色。在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。实例1：鼠标hover时，将内容框起来Title222111原始效果： 鼠标悬停后：实例2：尾品会vdangdang.com首页最下面有这样的图片原始网页：鼠标...

参与评论您还未登录，请先登录后发表或查看评论

Hovercss是一个CSS3的鼠标悬停效果集合

08-08

Hover.css 是一个 CSS3 的鼠标悬停效果集合，可用于超链接，按钮，logo，SVG，推荐图片等等。能够很简单地运用到我们的元素中。格式有 CSS, Sass, 和 LESS。

css 实现鼠标光标悬停的样式

m0_57576477的博客

08-17

1769

想要改变鼠标悬停时的鼠标样式，直接设置cursor属性

使用div和css创建鼠标悬停弹出层的交互设计

最新发布

weixin_42510243的博客

06-13

599

内容1</div><div class="col-md-4">内容2</div><div class="col-md-4">内容3</div></div>

CSS特效花样鼠标悬停效果

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-01

4509

鼠标悬停效果指的是当用户的鼠标指针停留在某个元素上时，该元素会发生某种变化。这种变化可以是颜色的变化、大小的变化、位置的移动、透明度的调整等等。通过合理地使用这些效果，可以增加页面的互动感，让用户在浏览时感到更加有趣。

css设置鼠标悬停 鼠标放在div上

baidu_40537062的博客

08-25

4563

CSS3实现鼠标悬停多种效果

css鼠标悬停样式_基本CSS样式排版

weixin_39876450的博客

11-29

919

标题HTML中定义的所有标题标签，从到都是可用的。h1. Heading 1h2. Heading 2h3. Heading 3h4. Heading 4h5. Heading 5h6. Heading 6Body copyBodystrap定义的全局font-size是14px,line-height是20px。这些样式应用到了和所有的段落上。另外，对(段落)还定义了1/2行高(默认为...

web-demo-伪类选择器

09-28

在实际开发中，伪类选择器经常与其它CSS选择器结合使用，形成更加复杂和具体的选择规则。比如可以用伪类选择器结合类选择器、ID选择器等，以达到精确控制样式的目的。在提供的压缩包文件中，包含了多个HTML文件，...

TestWeb-伪类选择器

09-28

伪类选择器允许开发者指定一个元素的特定状态，如鼠标悬停、元素聚焦、元素被选中等，从而可以为这些状态设置特定的样式。伪类选择器丰富了网页的交互性，增加了用户的交互体验。在给定的文件信息中，提到了HTML、...

python第五章作业-03-id、组、伪类选择器.ev4.rar

04-25

伪类选择器是CSS中的一种特殊选择器，它用于定义元素在特定状态下的样式，比如`:hover`表示鼠标悬停，`:active`表示元素被激活（如点击中），`:first-child`则选中父元素的第一个子元素等。这些伪类选择器在网页动态...

CSS 鼠标悬停悬浮

浅影歌年的博客

10-29

572

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> body { background-color: #f5f5f5; width: 100%; height: 100%; } div { text-align: c

CSS3：鼠标悬停效果

sunluyi的博客

12-17

2758

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello H5</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; background: #d6e5

CSS--鼠标悬停总结

qq_53441451的博客

12-20

1282

知识点一（悬停在文字上） <p>小爱</p> p{ font-size: 20px; color: #333; } /*鼠标悬停在p上时字体变大，颜色变为粉色；*/ p:hover{ font-size: 24px; color: pink; } 运行结果如下：知识点二(悬停在盒子上时出现阴影）（1）外阴影 <div class="box"></div> .box{ width: 200px; height: 200p

CSS鼠标悬浮及其样式

热门推荐

m0_49789433的博客

10-09

2万+

hover鼠标悬浮的使用和定义用法示例选择鼠标指针浮动在其上的元素，并设置其样式： .box:hover{ background-color: red; } 定义和用法 :hover 选择器用于选择鼠标指针浮动在上面的元素。提示：hover 选择器可用于所有元素 :link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。注释：在 CSS 定义中，:hover 必须位于 :li.

HTML中设置鼠标悬停状态伪类,四大伪类,css鼠标样式设置,reset操作,静止对文本操作...

weixin_36154762的博客

06-02

7559

本文将要为您介绍的是四大伪类,css鼠标样式设置,reset操作,静止对文本操作,教程操作方法:07.31自我总结一.a标签的四大伪类a:link{样式} 未访问时的状态(鼠标点击前显示的状态)a:hover{样式} 鼠标悬停时的状态a:visited{样式} 已访问过的状态(鼠标点击后的状态)a:active{样式} 鼠标点击时的状态补充input:focus{样式} 点击后鼠标移开保持鼠标点击...

css伪类选择器（可实现鼠标悬停变化等效果）

qq_53195433的博客

06-22

1980

在CSS中，伪类选择器用于选取元素的某些特定状态或特殊位置上的样式。它是用于向某些选择器添加特殊效果和样式的一种CSS技术，常用于鼠标交互、表单控件状态等场景下。需要注意的是，不同的浏览器对伪类选择器的支持程度不同，同时也需要根据业务需求合理地选择适合自己的伪类选择器。伪类选择器的语法采用冒号。

css鼠标悬停事件，css鼠标悬停特效

程序员

12-22

3568

1、css父元素hover悬停子元素缩放 .col-lg-4 img{ cursor: pointer; transition: all 1s ease; } .col-lg-4:hover img{ transform: scale(1.2); opacity: 0.5; } .col-lg-4:hover div:nth-child(2){ bottom: 8px; } .col-lg-4 div:nth-child(2){ cursor:.

前端工具库-strip-pseudos：CSS选择器伪类清除专家

伪类和伪元素是CSS选择器中用于匹配处于特定状态或具有特定位置的元素的关键技术之一。 - **伪类**：它是一个选择器，用于定义一个元素的特殊状态，比如`a:hover`表示鼠标悬停在链接上时的状态。常见的伪类还包括`:...