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

一、使用方案

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

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

HTML CSS 的鼠标悬浮，点击的样式
HTML CSS 的鼠标悬浮,点击等样式的编写 (以 a 便签为例子) 当鼠标悬浮时:a:hover <style>a:hover{font-size:19px;color:#000000 ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
[css] 怎么设置可点击的元素上强制手型？
[css] 怎么设置可点击的元素上强制手型? cursor 属性个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
html 悬浮在固定位置,纯CSS实现DIV悬浮(固定位置)
[推荐]2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Sa ...
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果: 代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><titl ...
纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: <!DOCTY ...
css 让div悬浮,纯CSS实现DIV悬浮(固定位置)
纯CSS实现的DIV悬浮效果(固定位置),兼容常用的浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等.效果如下: 实现代码: DIV悬浮示例-纯C ...

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

一、使用方案

二、代码

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

最新文章

热门文章