Question

我有一些工作且看起来很好的自定义按钮，除了悬停停止工作（应该在悬停时改变颜色。它在我第一次编码时工作但在某些时候停止了。我不确定它何时停止，或者为什么。它不能用于chrome，firefox或IE8。显然我已经搞砸了但我还没有找到它。我会继续寻找和研究，但如果你有任何想法，非常感谢。

HTML：

<input class="left-menu-button" type="button" value="Search" />
<input class="left-menu-button" type="button" value="View Detail" />

的CSS：

.left-menu-button
{
    width: 200px;
    height: 60px;
    color: #fff;
    background-color: #631127;
    border: none;
    margin: 20px 40px 0 0;
    font-size: 1.2em;
    float: right;
}

.left-menu-button:hover
 {
       background-color: #A3143A !important;
 }

Answer 1

1）在谷歌浏览器中打开您的页面;
2）按 F12 打开“开发人员工具”;
3）选择有问题的输入;
4）在右边你有应用的风格;
5）在“样式”标签上，单击第二个图标，一个虚线矩形内的光标;
6）选择“：悬停”，这样您就可以看到输入被徘徊时发生的情况并找到问题！

Answer 2

我知道这是一个老帖子，但是如果有人遇到我正在发布的相同问题。

我的解决方案是，没有显示：hover CSS的按钮具有通过元素ID设置的自定义背景。我把它切换到了一个类，然后能够看到：悬停样式。我猜ID背景样式优先于：通过元素标记名称设置悬停样式。

Answer 3

我有同样的问题。我尝试使用Chrome中的开发人员工具，但无济于事。最后，事实证明，我需要删除ID选择器和：hover属性之间的多余空间。例如，

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

上面的代码段无效，但下面的代码段有效

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

第二秒钟我弄清楚了，我知道是造成此问题的原因，但是如果其他人被卡住了，那你就走了

Answer 4

以防万一，我在使用此CSS时遇到了同样的问题；在测试页面中，css上没有其他任何内容；仅支持两种CSS样式。

在下一个CSS中，悬停不起作用（请参见: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再次工作，因此在:hover之后声明background-color解决了该问题。

为什么这个“顺序”会影响地狱？，我不知道，声明顺序会影响，但会影响（至少在FireFox 70.0.1版上）是不合逻辑的；也许对网络浏览器来说是一个糟糕的实现！！

Answer 5

这篇文章可能会回答你的问题： IE 8 CSS hover over input element issue

该页面可能会强制浏览器进入怪癖模式。

：hover似乎不适用于自定义按钮

5 个答案: