css中鼠标悬停和点击触发样式变换（:hover和:active）

Sca_jie

于 2023-06-27 14:46:58 发布

阅读量2.8k

点赞数

分类专栏： vue 文章标签： javascript 前端 css vue.js

本文链接： https://blog.csdn.net/weixin_42966151/article/details/131416709

版权

vue 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

效果

代码

/*hover--光标（鼠标指针）悬停在元素上时触发*/
.el-card:hover{
  background: #f5f5f6;
}
/*active--按下按键和松开按键之间的时间触发*/
.el-card:active{
  background: #e0dfdf;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sca_jie

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

html+css 实现hover选择按钮

宝码香车的博客

08-08

1221

这是一个，hover出现2个选择按钮的效果。附具体代码，深入理解，彻底掌握！直接看代码，可以一键复制，查看效果。

css的hover属性,CSS 搞事技巧：hover+active

weixin_39629352的博客

08-03

952

介绍在 JavaScript 中，我们可以利用变量，DOM 来保存状态，而 CSS 当中，我们也可以利用伪类选择器来保存状态，这就是 CSS 搞事的核心了。核心概念：保存状态。在上一篇 CSS 搞事技巧：checkbox+label+selector 中利用 checkbox+label+selector 来加深了解了 Flex 的弹性容器属性，这一节是要利用 :hover+:active 来了...

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

css 鼠标点击的几种状态

jinchenga的博客

03-09

1307

【代码】css 鼠标点击的几种状态。

鼠标悬停hover样式，简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效

12-07

鼠标悬停hover样式，简洁漂亮的css3鼠标悬停鼠标悬停hover样式边框和爱心点赞特效

前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结

weixin_52296487的博客

11-30

4332

前端 CSS：锚伪类选择器:hover,:active，:visited;等用法总结锚伪类选择器:hover,:active，:visited;等用法总结一、什么是锚伪类在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00

CSS ：hover和：active区别

ssisse的博客

09-01

2063

:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式； :focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；

CSS 搞事技巧：hover+active

weixin_34177064的博客

04-02

1085

CSS3实例教程:hover、active和:focus伪选择器。

zzc1684的博客

01-16

593

CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。　　今天我们先来接触:hover、active和:focus这三种状态伪类选择器。:hover选择器、:active选择器和:focus选择器　　:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；　　...

鼠标悬停hover样式-css-mouse-hover-master.zip

01-03