CSS 更改按钮悬停颜色

Posted 2023-03-06

【中文标题】CSS 更改按钮悬停颜色

【英文标题】：CSS Changing Button Hover Color

【发布时间】：2017-07-21 15:19:14

【问题描述】：

我有一个由 wpforms 插件构建的联系表格。 它希望我在空白处输入任何类名来更改我想要的任何内容。 假设我想更改提交按钮的背景颜色

我创建的css代码是

.contactform1 button[type=submit] 
background-color: #b49543;

我有这个，但由于某种原因这段代码不起作用。也许是因为课程的优先级，但我无法弄清楚。

你能帮帮我吗？ 提前谢谢！

【参考方案1】：

使用 css 的 :hover 选择器按照以下方式进行操作

.contactform1:hover 
background-color: #b49543;

【讨论】：

谢谢，但我在上面回答 Dubliyu 时仍然无法正常工作。 :) 我很困惑哈哈，不过我不太擅长这个。

@PorFavorDama 检查天气是否有任何错字问题或您是否在正确的位置添加了 CSS？

是的，我已经在样式页面上添加了 css，我认为我不应该将 css 代码添加到 wpforms 插件 css 页面上，是吗？顺便加了个截图，请查收。

【参考方案2】：

将 :hover 放在按钮上。

.contactform1 button:hover
    background-color: #b49543;

【讨论】：

谢谢，但它仍然无法正常工作。我不知道为什么。无论如何，您可以在网站上查看它以找出问题所在吗？或者我可以截图并在这里与大家分享链接。

【参考方案3】：

以下是使用 hover 属性时的外观。 如您所见，它不会影响输入按钮或其他按钮类型。

.contactform1 button[type=submit]:hover 
  background-color: #b49543;

<div class="contactform1">
  <button type="submit">button Submit</button>
  <input type="submit" value="input Submit" />
  <button type="reset">button Reset</button>    
  <button type="button">button Button</button>
</div>

响应 OP 的更新： CSS 遵循先进先出的数据结构化方法。因此，您可以预期在处理 CSS 时会发生这种类型的流程。尝试将特定的 CSS 放在其他所有内容之后。

进一步更新： 我看了你的截图。看起来您不需要按钮类型的悬停。只需使用

.contactform1:hover
   background-color: #b49543;

这是因为它们都是同一个 DOM 元素的一部分。如果你尝试通过 DOM 元素类型和 Class 来调用它，它会认为按钮在 .contactform1 内部。

【讨论】：

这是一个提交按钮，我已经从代码中添加了一个 ss，或者如果允许在此处链接，您甚至可以在我的网站上查看它。无论如何，感谢您提供有用的信息！

我已更新我的答案以反映您需要做什么。你试图调用太多的东西。只需指定 .contactform1:hover 属性就可以了。您无需同时指定 .contactform1 和 button[type=submit]，因为它们都是同一个 DOM 元素的一部分。

哈哈，好吧，对不起，但它又没用了。顺便说一句，我应该在我的主要 style.css 或 wpforms-full.css 中指定这些代码吗？两者都没有工作。感谢您的回答！

如果没有更多代码，我无法进一步帮助您。这取决于您的设计模式。如果您在 style.css 中调用了 contactform1，请将其放在那里。我也会尝试调试它并将其添加为 Chrome 中的元素样式。看看会发生什么。然后将鼠标悬停在它上面，看看是否有任何变化。

还是谢谢你！不过你帮了我:)如果我修好了，我会告诉你的。感谢您的帮助！