css 点击后改变样式

背景:

期望实现效果:鼠标点击之后,保持选中样式。

实现思路:在css样式中,:active 是一种伪类,用于表示用户当前正在与被选定的元素进行交互。当用户点击或按住鼠标时,元素将被激活,此时 :active 伪类将生效。一旦鼠标按键释放或触摸结束,:active 状态将消失

:focus伪类的样式在元素获得焦点后会保持显示,直到失去焦点。

最终思路:

通过 CSS 来保持 :active 样式。这可以通过使用 :focus + :active 选择器结合 tabindex 属性来实现。

效果展示:

核心代码:

tabindex绑定一个值,可以是字符串,也可以是数字类型。主要是做区分不同的点击元素

css 复制代码
//css                    
                    .menu-item {
                        margin: 0 20px;

                        .text {
                            color: #FFFFFF;
                        }
                    }
                    .menu-item:active {
                        background-color: pink;

                        .text {
                            color: #FFEEA8 !important;
                        }
                    }

                    .menu-item:focus {
                        background-color: rgb(192, 255, 197);

                        .text {
                            color: #FFEEA8 !important;
                        }

                    }

发现只要这串代码也能实现效果:

css 复制代码
        .menu-item:focus {
                        border: none;
                        border-bottom: 2px solid;
                        color: #FFEEA8;
                        border-image: 
            linear-gradient(90deg, rgba(19, 69, 117, 0), 
            rgba(255, 238, 168, 1), rgba(19, 69, 117, 0)) 2 2;

                        .text {
                            color: #FFEEA8 !important;
                        }

                    }

官网链接:点击跳转

有兴趣的欢迎补充、评论。。。

相关推荐
前端工作日常20 分钟前
我理解的eslint配置
前端·eslint
前端工作日常1 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔1 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖2 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴2 小时前
ABS - Rhomb
前端·webgl
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年2 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
桑晒.2 小时前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf
宋辰月2 小时前
Vue2-VueRouter
开发语言·前端·javascript
徐小夕2 小时前
再也不怕看不懂 GitHub 代码!这款AI开源项目,一键生成交互架构图
前端·算法·github