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;
                        }

                    }

官网链接:点击跳转

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

相关推荐
上单带刀不带妹8 分钟前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
11054654011 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax1 小时前
在图片没有加载完成时设置默认图片
前端
OEC小胖胖2 小时前
【React 设计模式】受控与非受控:解构 React 组件设计的核心模式
前端·react.js·设计模式·前端框架·web
你怎么知道我是队长2 小时前
C语言---编译的最小单位---令牌(Token)
java·c语言·前端
一枚前端小能手3 小时前
🔥 Vue状态管理越写越乱,Pinia拯救了我
前端
cloudcruiser3 小时前
Apache HTTP Server:深入探索Web世界的磐石基石!!!
前端·其他·http·apache
一个专注api接口开发的小白3 小时前
手把手教程:使用 Postman 测试与调试淘宝商品详情 API
前端·数据挖掘·api
织_网4 小时前
Electron 核心 API 全解析:从基础到实战场景
前端·javascript·electron
vvilkim4 小时前
深入理解 Spring Boot Starter:简化依赖管理与自动配置的利器
java·前端·spring boot