11

我有几个自定义按钮正在工作并且看起来很好，除了悬停停止工作（应该在悬停时改变颜色。它在我第一次编码时工作但在某些时候它停止了。我不确定它什么时候停止，或者为什么。它不能在 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;
 }
4

5 回答 5

15

1) 在谷歌浏览器中打开您的页面；
2）按F12打开“开发者工具”；
3）选择你有问题的输入；
4）在右边你有应用的样式；
5) 在“样式”选项卡上，单击第二个图标，即虚线矩形内的光标；
6) 选择":hover"，这样您就可以看到当您的输入被悬停时发生了什么并找到问题！

于 2013-02-14T16:33:59.340 回答
6

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

#button :hover {
  background-color: #7e7ecc;
}
上面的代码片段不起作用，但下面的代码片段起作用了

#button:hover {
  background-color: #7e7ecc;
}
当我弄清楚的那一刻，我知道这是导致问题的原因，但万一其他人被卡住了，那就去吧

于 2020-04-13T02:35:25.610 回答
3

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

对我来说，解决方案是不显示 :hover CSS 的按钮具有通过元素 ID 设置的自定义背景。我将它切换到一个类，然后能够看到 :hover 样式。我猜 ID 背景样式优先于 :hover 通过元素标签名称设置的样式。

于 2016-06-01T17:08:55.093 回答
2

以防万一它有帮助，我在这个 css 上遇到了同样的问题；在 css 上没有任何其他内容，在测试页面中；junt 只有两种 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 上）；也许这在网络浏览器上是一个糟糕的实现！

于 2019-11-08T07:53:21.763 回答
-1

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

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

于 2013-02-14T16:29:24.567 回答