一、使用方案

css伪类

  1. active:元素被点击时变色,点击后颜色消失
  2. focus:元素被点击后变色,点击后颜色不消失
  3. hover:鼠标悬浮时变色,移除后颜色消失

二、代码

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