css 悬停在 link - 不工作

Question

最后一部分有一个按钮 - 立即加入。

目前，悬停按钮具有 - 绿色背景和白色文本。我希望它是白色背景和绿色文本。

我试过这段代码：

 .joen_now_part h6 a:hover {
   background-color: #fff;
   color: #2a8a15;

 }

但由于某些原因，一切都没有改变。

非常感谢您的帮助和建议。

Answer 1

已经应用了一些 class 所以必须覆盖 class

这是默认值class它正在应用

a:hover, a:focus, a:active {
    background-color: #2a8a15;
    color: #fff;
}

所以你必须添加这个

 .joen_now_part h6 a:hover {
   background-color: #fff !important;
   color: #2a8a15 !important;

 }

对于reference

Answer 2

尝试这样的事情codepen

.yourButton {
  background: transparent;
  border: 2px solid #2a8a15;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: Uppercase;
  color: #2a8a15;
  font-family: 'Lato', sans-serif;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.yourButton:hover, yourButton:focus, yourButton:active {
  background: #FFFFFF;
  color: #2a8a15;
}

css 悬停在 link - 不工作

css hover on a link - not working

html

css

hover