当我使用 CSS 将鼠标悬停在按钮上时，我试图让按钮中的文本改变颜色

Posted 2023-03-06

【中文标题】当我使用 CSS 将鼠标悬停在按钮上时，我试图让按钮中的文本改变颜色

【英文标题】：I am trying to make the text in a button change color when I hover over in with the mouse using CSS

【发布时间】：2020-03-11 06:20:40

【问题描述】：

我有一个 wordpress 网站，我在标题菜单中有一个按钮，称为“作为交易员加入”。

http://prntscr.com/px7mdt

它有一个绿色的边框和白色的背景，文字是黑色的。

当我将鼠标悬停在按钮上时，我希望按钮的背景变为绿色（颜色：#25ad00），文本变为白色（颜色：#fff）。

我已将以下代码添加到自定义 css 是仪表板：

body #menu-item-1847 a
    color:#000;

#menu-item-1847 a
    font-weight: 700;
    border: 2px solid #25ad00;
        border-radius: 5px;
    padding: 2px 20px
    
#menu-item-1847 a:hover 
    color: #fff;
    background-color: #25ad00;

...但是现在当我将鼠标悬停在按钮上时，背景变为绿色，但文本仍为黑色：

http://prntscr.com/px7o9u

我只是在徘徊，因为我认为代码有什么问题

#menu-item-1847 a:hover 
    color: #fff;

...当我将鼠标悬停在文本上时会将其颜色更改为白色吗？

谢谢

【问题讨论】：

嗨，Jas，您知道，使用 !important 并不是一个好习惯。这意味着您没有正确确定样式的范围。 !important 将覆盖所有内容（包含 !important 的内联 css 栏）。在转向 !important 之前，请先更好地确定 CSS 的范围。

@Spangle 嗨 Spangle，谢谢。我知道了。我认为上面的代码与我之前为另一个按钮添加的 CSS 冲突，同样在菜单栏中，它具有相反的配色方案：#menu-item-1272 a:hover color: #000; background-color: #fff; 有什么办法可以避免这种情况，只是为了其他人的利益？

【参考方案1】：

要覆盖现有的 CSS，请像这样添加 !important：

#menu-item-1847 a:hover 
color: #fff!important;
background-color: #25ad00!important;

【讨论】：

嘿，谢谢。那解决了！是的，另一个按钮的现有 CSS 代码在悬停在它上面时具有相反的配色方案。非常感谢！！！

【参考方案2】：

您可以像这样使用!important 语句。 （如果你正确指定了选择器，如果没有，请仔细检查选择器#menu-item-1847）

#menu-item-1847 a:hover 
    color: #fff!important;

意思是：

如果周围没有其他重要的事情，请使用我！

【讨论】：

感谢您的解释，效果很好！

【参考方案3】：

这完全取决于你的 DOM 的 CSS 特性，你可以在不添加 !important 的情况下让你的代码正常工作。

只是增加 CSS 的特异性。 （分享你的 html，我会用 CSS 特性来解释）

请阅读 CSS 特性。使用 !important 不是好的做法。这不是干净的代码。浏览这些文章。

Don't use !important instead increase CSS specificity Is Using !important is a right choice?

【讨论】：

嗨@sabitha kuppusamy，对不起，我刚收到这个。非常感谢。我阅读了您发送的文章，但如果没有它，我认为我的知识不足以解决这个问题。我要编辑的按钮在我的菜单栏上，我希望按钮变为绿色，并将文本悬停在其上时变为白色。同一菜单上还有另一个按钮，在此处执行相反的操作：prntscr.com/pxpgue，“发布工作”和“作为交易员加入”。这是我为他们使用的 CSS：prntscr.com/pxpialprntscr.com/pxpix6 你认为没有 !important 也可以这样做吗？

是的，有可能。你也可以分享你的HTML吗？我会帮你的。

嘿，谢谢。我不确定在哪个文件中，是在 functions.php 中吗？

是的，请分享！我想要您在其中添加了 ID 的 DOM 元素。您是否动态添加“#menu-item-1847”？

对此我真的很抱歉，但我是一个完整的新手，我并不完全理解这些术语。关于“#menu-item-1847”，我刚刚使用此处的检查元素找到它：prnt.sc/pxrr7z 然后在我的 wordpress 仪表板的自定义 CSS 部分中手动输入 CSS 代码。这是我完整函数的截图。php prnt.sc/pxsmhv prntscr.com/pxsmrm prntscr.com/pxsn23 如果这不是正确的文件，我再次道歉。