Question

http://glymed-plus.mybigcommerce.com/age-management/

在“聚光灯下”的右侧有一个按钮，上面写着“立即购买＆gt;”并且插入符号需要在悬停时改变颜色。如果将鼠标悬停在它上面，您将看到问题所在。我想让它在按钮上的任何区域悬停时更改，而不仅仅是插入符号。

以下是代码：

.spotlights {
  margin-bottom: 34px;
}

.half {
  width:45%;
  float:left;
}

.spotlight {
 width:45%;
 float:right;
}

.spotlight .btn{
  border: 1px solid #fff;
  color: #fff;
}

.spotlight .btn:hover{
  border: 1px solid #fff;
  color: #fff;
  background-color: #4ca3c0;
}

.spotlight .btn em{
  color: #4ca3c0;
}

.spotlight .btn em:hover{
  color: #fff;
}

.spot {
  text-transform: uppercase;
  background-color: #4ca3c0;
  padding: 5px;
  font-size: 1.2em;
  color: #fff;
  letter-spacing: .1em;
  margin-bottom: 10px;
  margin-left: 98px;
 }

.prodtitle {
  color: #4ca3c0;
  font-size: 1.2em;
  margin-bottom: 5px;
}

.spotprod {
  height:190px;
  float:left;
  padding-right: 25px;
  padding-top: 5px;
}

Answer 1

你想改变按钮悬停的颜色，而不是em的悬停（这就是你现在正在做的事情）

.spotlight .btn:hover em{
  color: #fff;
}

增加按钮内元素的悬停区域

1 个答案: