鼠标移走时，鼠标悬停hover样式不消失

Posted 2020-11-02 我想和这个世界谈谈V

问题描述

在使用分页组件时，点击页码跳转，在页码较多时点击当前显示的最大的页码，会加上active样式，但是新加载出来的页面也会加上‘active’。样式并且在点击其他位置时，该样式会消失
例如图一中点击第‘8’页，第‘8’页会加上‘active’样式，后面加载出来第九页第十页，第十页也会有‘active’样式。如图二：

图一

图二

 

问题分析

在点击了第‘8’页时，新加载出第九页第十页，此时鼠标的位置切换到了第十页的位置，由于在样式中加了:focus伪类会自动添加点击后的效果，变造成了上述的问题

 

解决办法

删除样式的:focus伪类，或者将:focus样式改成当前未选中页码的样式，将原来的:focus覆盖。