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

在“在聚光灯下”的右侧有一个按钮，上面写着“Shop Now>”，鼠标悬停时插入符号需要更改颜色。如果你把鼠标悬停在它上面，你就会看到问题所在。我希望它在按钮上的任何区域悬停时都会改变，而不仅仅是插入符号

代码如下：

.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;
}

---

您想更改按钮悬停的颜色，而不是

em

的悬停（这就是您现在正在做的）

---

请在问题本身中包含相关的html标记。我认为您必须使用JavaScript。如果将鼠标悬停在按钮上，则搜索父元素并更改背景色等。

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