CSS按钮在悬停期间不改变颜色（css和html）

Posted 2023-02-21

【中文标题】CSS按钮在悬停期间不改变颜色（css和html）

【英文标题】：CSS button not changing colour during hover (css and html)

【发布时间】：2021-04-28 03:57:12

【问题描述】：

由于某种原因，当我将鼠标悬停在按钮上时，我的代码不允许我更改按钮的背景颜色。

.button 
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e


.button.new-quote:hover 
    background-color: black !important;

<input type="button" class="new-quote button" value= 'test'/>

感谢您的帮助。我试过让选择器成为一个按钮，我试过在代码的其他部分使用 CSS 没有运气。我正在使用括号编辑器

【问题讨论】：

当我在 sn-p 中使用你的 CSS 和 html 时对我有用。

您的 CSS 可能在某处被覆盖；即使你有!important 标签。你确定你没有在任何地方重新定义.button.new-quote:hover？

@EH11353 检查我的答案我发现了为什么它一开始就不起作用的问题。您的选择器没有任何问题。

【参考方案1】：

这可能对你有帮助

.button 
  display:inline-block;
  padding:0.3em 1.2em;
  margin:0 0.1em 0.1em 0;
  border:0.16em solid rgba(255,255,255,0);
  border-radius:2em;
  box-sizing: border-box;
  text-decoration:none;
  font-family:'Roboto',sans-serif;
  font-weight:300;
  color:#FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
  text-align:center;
  transition: all 0.2s;
  background-color:#f14e4e;



.button:hover
  background-color:black !important;

<input type="button" class="new-quote button" value= 'test'/>

【参考方案2】：

您的代码运行良好。

在背景色之前隐藏了一些不可见的字符。

所以不是被解析为背景色， 它可能被解析为：%20%20%20background-color 或者类似的奇怪的东西

.button 
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    background-color:#f14e4e;



.button.new-quote:hover
  background-color:black;
  font-size:19px;

   <input type="button" class="new-quote button" value='test'/>

【讨论】：

为什么是background 而不是background-color？

两者都适用，我会尽快用解释编辑答案

***.com/questions/10205464/…@s.kuznetsov

是的，但是同意，当默认是background-color，在悬停时是background，看起来有点可笑。此外，当您拥有包含大量伪类的庞大代码时，这可能会令人困惑。

谢谢！这似乎成功了！

【参考方案3】：

您的选择器没有问题。您已正确选择按钮悬停。我已经运行了你的代码，猜猜它运行良好。

我发现了为什么您的代码不起作用的问题。

.button.new-quote:hover 
    background-color: black !important;

这是你的选择器，现在检查我的选择器

.button.new-quote:hover 
  background-color: black !important;

你能看出这里有什么不同吗？这是background-color 属性后面的额外空格。我先删除了所有空格，然后添加了两个空格，然后它就按预期工作了。

在我看来，我认为您从其他地方复制了 background-color 属性，该属性具有添加隐藏字符空间的复制策略。

.button 
  display: inline-block;
  padding: 0.3em 1.2em;
  margin: 0 0.1em 0.1em 0;
  border: 0.16em solid rgba(255, 255, 255, 0);
  border-radius: 2em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: #FFFFFF;
  text-shadow: 0 0.04em 0.04em rgba(0, 0, 0, 0.35);
  text-align: center;
  transition: all 0.2s;
  background-color: #f14e4e


.button.new-quote:hover 
  background-color: black !important;

<input type="button" class="new-quote button" value='test' />

【讨论】：

我不确定原因，但找到了问题。

正确，发现这一点做得很好，花了太多时间才发现...

我已经对那个代码应用了 prettier，然后我才知道代码的格式有问题。

谢谢！这似乎是问题所在，但为什么 linter 没有像我的 javascript 中通常那样找到它？那么它不适用于CSS代码吗？

ESLint 用于 javascript。像 scsslint 或更旧的 CSSLint 这样的 CSS 的 linter 很少。现在大多数 CSS 开发者使用PostCSS。