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

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)在Google Chrome中打开您的页面;
2)按F12键将"Developer Tools"打开;
3)选择有问题的输入;
4)在右边你有应用的风格;
5)在" 样式 "选项卡上,单击第二个图标,一个虚线矩形内的光标;
6)选择":悬停",以便您可以看到输入被徘徊时发生的情况并找到问题!

Answer 2

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

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

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

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

第二个我想通了，我知道这就是导致问题的原因，但万一其他人卡住了，你去吧