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

Posted 2023-05-08

【中文标题】:hover 似乎不适用于自定义按钮

【英文标题】：:hover does not seem to be working on custom buttons

【发布时间】：2013-01-30 12:30:21

【问题描述】：

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

【问题讨论】：

Works 在 Chrome 和 Mozilla 中。

应该可以工作 - jsfiddle.net/WNMT9 你可能有一些其他样式优先于这些

Your code works fine。您的 CSS 中还有其他问题。也许你用input:hover 或类似的东西覆盖。

有趣但有道理，因为它有效。好的，我会四处寻找。是否有任何“常见的悬停杀手”或类似的东西，我应该首先寻找（除了明显的内联内容）？

不 - 只需在 Firebug 或开发者工具中查看您的代码。它会显示元素的所有应用样式

【参考方案1】：

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

【讨论】：

感谢 Ivozor，当我看到您的回答时，我正试图弄清楚如何激活该控件。我注意到，当我尝试在其中一个按钮上“检查元素”时，开发人员窗口将在不同的 div 中打开。我最终发现 div 有 100% 的高度，我猜这隐藏了按钮并导致悬停不注册。

这个方便的技巧让我意识到另一个内联 css 正在覆盖悬停状态。我通过将 !important 添加到悬停类来修复它。

【参考方案2】：

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

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

上面的 sn-p 不起作用，但下面的 sn-p 起作用了

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

当我弄清楚的那一刻，我知道这是导致问题的原因，但万一其他人被卡住了，你去吧

【讨论】：

疯了！！这是真的！谢谢:)

【参考方案3】：

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

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

【参考方案4】：

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

【参考方案5】：

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

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

【讨论】：

不只是IE8问题，所以答案无关