css 点击后改变样式

背景：

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

实现思路：在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;}}

 

官网链接：点击跳转

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