1)在Google Chrome浏览器中打开您的页面;
2)按F12打开“开发人员工具”;
3)选择您有问题的输入;
4)右边是应用的样式;
5)在“样式”选项卡上，单击第二个图标，虚线矩形内的光标;
6)选择**"：hover”**，这样您就可以看到输入悬停时发生的情况并找到问题所在！

我也遇到了同样的问题。我试着使用Chrome中的开发者工具，但无济于事。最后，我发现我需要删除ID选择器和：hover属性之间的多余空格。例如，

#button :hover {
  background-color: #7e7ecc;
}

上面的代码段不起作用，但下面的代码段起作用了

#button:hover {
  background-color: #7e7ecc;
}

在我发现问题的那一刻，我就知道这就是导致问题的原因，但如果其他人遇到问题，那就这样吧

我知道这是一个老职位，但如果有人有同样的问题，我有我会张贴。
我的解决方案是，不显示：hover CSS的按钮有一个通过元素ID设置的自定义背景。我将其切换到一个类，然后能够看到：hover样式。我猜ID背景样式优先于通过元素标记名设置的：hover样式。

以防万一，我也遇到了同样的问题，这个CSS;在CSS上没有任何其它内容的情况下，在测试页面中;只跳过两个css样式。
在下一个css中，hover不起作用（请注意:hover声明在background-color声明之前）：

button:hover{
  background-color:#DDDDDD;
}
button.myButton{
  background-color:transparent;
}

我只是通过以不同的顺序编写css来解决这个问题（现在:hover声明在background-color声明之后）：

button.myButton{
  background-color:transparent;
}
button:hover{
  background-color:#DDDDDD;
}

这个“顺序”使:hover再次工作，因此在background-color之后声明:hover解决了这个问题。
为什么这个“顺序”会影响？我不知道，声明顺序可能会影响是不合乎逻辑的，但会影响（至少在FireFox版本70.0.1上）;也许这是一个坏的实现在网络浏览器！！！

刚刚遇到了同样的问题......
在“父元素”上使用线性渐变将阻止使用background-color或color的：hover或：focus事件上的任何颜色更改。您需要在：hover和：focus事件上也使用background-image：

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

是的，我也遇到了同样的情况，然后我试着不使用:hover函数的类名，而是更好地使用“id”。当我使用它时，它工作得很完美。

此帖子可能会回答您的问题：IE 8 CSS hover over input element issue
该页面可能会强制浏览器进入异常模式。