纯css实现鼠标悬浮、点击更改元素背景

最新推荐文章于 2024-07-12 19:34:37 发布

包包治百病

最新推荐文章于 2024-07-12 19:34:37 发布

阅读量5.2k

点赞数

分类专栏：每周都写点儿文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_42981449/article/details/129957112

版权

每周都写点儿专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、使用方案

css伪类

active：元素被点击时变色，点击后颜色消失
focus：元素被点击后变色，点击后颜色不消失
hover：鼠标悬浮时变色，移除后颜色消失

二、代码

template部分代码

<div v-for="(item, index) of dataForm.subjectList" :key="item.id" class="border-input-border wh-35x mrt-m flex-y-center cursor subject-index" :tabindex="index + 1" @click="clickSubjectIndex(item.index)">
   {{ index + 1 }}
 </div>
 .subject-index:focus,
.subject-index:hover {
  background-color: var(--menu-checked);
}

style部分代码

.subject-index:focus,
.subject-index:hover {
  background-color: var(--menu-checked);
}```
## 三、遇到的问题
由于div等元素无法接受键盘或其他用户事件，即不支持:focus伪类，可通过增加tabIndex属性使其支持:focus。
## 四、tabIndex
【全局属性】 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。