css的元素:focus伪类不生效
遇到一个需求,在vue项目中根据a标签那样的链接跳转效果来实现组件的切换,于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果,但是当给div设置伪类:focus后发现并没有生效。tabIndex属性:利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序,同时也有指示其元素是否可以聚焦(获得焦点)的作用。:focus :在元素获得焦点时向元素添加特殊的样式(
·
问题
遇到一个需求,通过给div设置伪类:focus来被点击后变色的效果,但是当给div设置伪类:focus后发现并没有生效。
:focus :在元素获得焦点时向元素添加特殊的样式(如果是给元素设置颜色样式的话,被点击后变色,且颜色在点击后不消失)
原因
百度了一下才发现div是 不支持:focus伪类 的,因为 div等元素无法接受键盘或其他用户事件 。
解决方法
解决方法就是可以给div元素添加tabIndex属性,使其能够支持:focus伪类。
tabIndex属性:利用tab键遍历页面的表单元素和链接,按照tabindex的大小决定顺序,同时也有指示其元素是否可以聚焦(获得焦点)的作用。
代码:
//结构
<div tabindex="1"></div>
//样式
div:focus{
color: rgb(85,26,139);
}
更多推荐
已为社区贡献7条内容
所有评论(0)