css 点击后改变样式

影子信息

于 2025-05-12 17:01:30 发布

阅读量510

点赞数 5

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

本文链接：https://blog.csdn.net/weixin_45024453/article/details/147899177

版权

css 专栏收录该内容

15 篇文章

订阅专栏

背景：

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

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

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

最终思路：

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

效果展示：

核心代码：

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

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

                    }

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

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

                    }