Question

当我将鼠标悬停在按钮上时，我正试图将我的按钮中的文字更改为白色。但是，当我将鼠标悬停在按钮上时，文本颜色不会变为白色，而是变为灰色，但背景会变为正确的颜色，这意味着我将鼠标悬停在正确的元素上。我检查了这一点，似乎button:hover被现有的文本悬停颜色覆盖了。有什么方法可以删除当前的灰色悬停颜色并使用我的白色悬停颜色吗？

我的代码是休闲

.button:hover {
  color: white;
  background-color: #1B43F9;
}

 <a class="button" href="#">Buy Now</a>
</ul>

我的整个css就像休耕一样

.columns {
  float: left;
  width: 31%;
  padding: 8px;
}

/* Style the list */

.price {
  list-style-type: none;
  border: 3px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-align: center;
  border-radius: 7%;
}

/* Add shadows on hover */

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

/* Pricing header */

.price .header {
  background-color: white;
  color: white;
  border-radius: 36px 36px 0px 0px;
}

/* List items */

.price li {
  margin-left: 4%;
  padding: 5%;
  text-align: center;
}

/* Grey list item */

.price .annualPrice {
  background-color: #1BA5E0;
  margin: 0px;
  font-style: bold;
  color: white;
  height: 75px;
}

.subTitle {
  background-color: #1BA5E0;
  padding: 3%;
  color: white;
}

/* The "Sign Up" button */

.button {
  background-color: #1ba5e0;
  border: none;
  color: white;
  padding: 3% 5%;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

.button:hover {

  background-color: #1B43F9;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */

.header {
  margin-bottom: 8.5%;
}

.price li {
  background: url(http://presentationsolutions.eu/new2/wp-content/uploads/2016/11/check.png) no-repeat left top;
  height: 10%px;
  padding-left: 14%;
  padding-top: 0%;
  text-align: left;
}

.buyCompareButton {
  margin: 12% 0% 8% 0%;
  font-family: "myriad-pro","myriad-pro",sans-serif !important;
  font-weight: 300!important;
  font-size: 1.2em;
  line-height: 28px !important;
}

Answer 1

问题可能是您的网站使用了不同的样式表。

尝试写作！重要的是你的颜色。

你的css代码：

.button:hover {
    color: white !important;
    background-color: #1B43F9;
}

悬停按钮无法正常工作

1 个答案: