Question

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

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简写使用了一个被解释为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>

Answer 2

更改＆＃34; .ryanAddButton＆＃34;中的背景渐变。对于黑色，你错过了＆＃34; ryanAddButton：hover＆＃34;上课的点，应该是＆＃34; .ryanAddButton：hover＆＃34;

Answer 3

首先，你的CSS中有一个小错误。

解决方案1 :(简单的一个 - 外行人的解决方案）：

其次，Paulie_D的回答是正确的。但是，正如另一个观点一样，如果您应用背景属性，为什么不在hover更改相同的属性：

＆＃13;

.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:white;
    color:black;
  border: 1px solid #ccc;
}

＆＃13;

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

＆＃13;

解决方案2 :(更好的解决方案 - 设计师/程序员的解决方案）：

您的背景属性使用线性渐变。但是，由于两种颜色相同，因此使用线性梯度变得多余。相反，您可以通过使用background-color属性来获取颜色。这是有益的，因为您不需要使用供应商前缀，同时浏览器支持在旧版浏览器上会更好。

同时，它只减少了几行代码：

background-color : black;

希望这有帮助!!!

Answer 4

您的背景使用渐变，该渐变覆盖背景颜色。因此，即使您更改背后的背景颜色渐变，也不会看到更改。您可以通过设置整个background属性来覆盖它，这将删除渐变，同时还设置背景颜色。

.ryanAddButton:hover{
  background:white; /* overrides all background properties */
  color:black;
}

您的悬停选择器中也遗漏了.。

.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:white;
color:black;
}

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

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

4 个答案: