admin 管理员组

文章数量: 893893

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

一、使用方案

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键，因此得名）。

本文标签： 纯css实现鼠标悬浮点击更改元素背景

版权声明：本文标题：纯css实现鼠标悬浮、点击更改元素背景 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688191782h190199.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。