如何在悬停时使用 CSS 反转颜色

Question

我正在尝试使用 CSS 样式制作交互式购物车按钮。我希望我的“添加到购物车”按钮在悬停时反转颜色（仅限黑色和白色）以增强用户体验。

CSS样式：

.ryanAddButton {
  display:       inline-block;
  padding:       8px 0px;
  width:          390px;
  background:    -moz-linear-gradient(#000, #000);
  background:    -o-linear-gradient(#000, #000);
  background:    -webkit-linear-gradient(#000, #000);
  background:    linear-gradient(#000, #000);
  color:         #fff;
  font:          normal 700 20px/1 "Calibri", sans-serif;
  text-align:    center;
  text-shadow:   1px 1px 0 #000;
}
ryanAddButton:hover {
  background-color:white;
  color:black;
}

按钮的 HTML 片段：

<p  class ="ryanAddButton">Add to Cart</p>

Answer 1

您的原始background速记使用解释为 a 的渐变，background-image因此您的悬停声明不会覆盖该属性。

.ryanAddButton {
  display: inline-block;
  padding: 8px 0px;
  width: 390px;
  /*
background:    -moz-linear-gradient(#000, #000);
background:    -o-linear-gradient(#000, #000);
background:    -webkit-linear-gradient(#000, #000);
background:    linear-gradient(#000, #000);
    */
  background: black;
  color: #fff;
  font: normal 700 20px/1"Calibri", sans-serif;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
  background-color: white;
  color: black;
}

<p class="ryanAddButton">Add to Cart</p>