按钮字体悬停颜色默认为站点悬停颜色(Button Font Hover Color Defaulting to Site A Hover Color)

按钮字体悬停颜色默认为站点悬停颜色(Button Font Hover Color Defaulting to Site A Hover Color)

我希望有人可以提供帮助。 我现在尝试了很多修复，不知道我做错了什么。

我的网站是Clintonholmes.com

我的代码“我想了解更多？” 我的主页上的按钮如下。

.button1 { background-color: white; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: #663366; border: 2px solid #663366; } .button1:hover { background-color: #663366; color: white; a.color: white; }

出于某种原因，在悬停时，字体是灰色而不是白色。 我究竟做错了什么？

谢谢！ 克林顿

I'm hoping someone can help. I've tried a number of fixes now and don't know what I'm doing wrong.

My site is Clintonholmes.com

The code I have for my "Want to know more?" Button on my home page is as follows.

.button1 { background-color: white; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: #663366; border: 2px solid #663366; } .button1:hover { background-color: #663366; color: white; a.color: white; }

For some reason, on hover, the font is grey instead of white. What am I doing wrong?

Thanks! Clinton

最满意答案

这是一个CSS特异性问题。 https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以使用具有更高特异性的选择器以任意多种方式修复它。 这有几种方法。

更改.button1:hover到body.gppro-custom a:hover

或者你可以改变color: white; color: white!important; 在.button1:hover

It's a CSS specificity issue. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

You can fix it any number of ways by using a selector with higher specificity. Here are a couple of ways.

Change .button1:hover to body.gppro-custom a:hover

Or you can change color: white; to color: white!important; in .button1:hover