a :hover样式设置后，点击后进入新页面，点击原页面窗口，a标签接依然处于hover状态

Question

今天测试提交的一个兼容性问题，谷歌没上没有问题，QQ浏览器上会出现。感觉是浏览器没有将打开新页面算为离开a标签

例如：

<style>
    a:hover{
        background-color: red;
    }
</style>
<a href="https://www.baidu.com/" target="_blank">123123131</a>

在鼠标未移入原页面前，依旧是hover的状态。

相当于是鼠标在这一块移动的时候，依旧被默认为是在hover状态

Answer 1

chrome下情况
其实这个也不能算是兼容性问题，这个是打开新窗口的和鼠标hover事件(鼠标位置计算？)的一个冲突吧。
过程如下：
1.打开新页面时，原页面上鼠标无法被响应到，默认还是在原来位置上；
2.重新回到原页面时候，focuson chrome tab时，鼠标未进入到document时候，页面上还是不会触发鼠标移动。
3.只有当你鼠标进入document时候才会重新计算鼠标位置，判断是否hoverout。

Answer 2

那就把link、visited、hover、active状态全部设置颜色。

Answer 3

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。

:acitve被重写了,给:active修饰一下应该就可以了

Answer 4

个人的解决办法是点击的时候增加一个class名，然后设置样式强行覆盖hover的样式，然后鼠标移入的时候在去掉class名

Answer 5

我也遇到过这个问题 使用mouseenter和mouseleave添加和除去样式