问题

遇到一个需求,在vue项目中根据a标签那样的链接跳转效果来实现组件的切换,于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果,但是当给div设置伪类:focus后发现并没有生效。

:focus :在元素获得焦点时向元素添加特殊的样式(如果是给元素设置颜色样式的话,被点击后变色,且颜色在点击后不消失)

原因

百度了一下才发现div是 不支持:focus伪类 的,因为 div等元素无法接受键盘或其他用户事件

解决方法

解决方法就是可以给div元素添加tabIndex属性,使其能够支持:focus伪类。
tabIndex属性:利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序,同时也有指示其元素是否可以聚焦(获得焦点)的作用。

代码:

<div tabindex="1"></div>

div:focus{
	color: rgb(85,26,139);
}

👇觉得有帮助的朋友可以支持下作者哦,您的鼓励是我创作的最大动力,如有开发问题可联系作者
请添加图片描述

Logo

前往低代码交流专区

更多推荐