悬停在按钮上时如何使颜色变为白色

Question

仅当我将鼠标悬停在文本上时，文本颜色才会更改。我希望将鼠标悬停在按钮上时文本颜色变为白色。

任何人都可以看到我要去哪里了吗？

#callbtn {
  border: 1px solid #507487;
  background-color: white;
  padding: 10px;
  font-size: 20px;
  color: #507487;
  border-radius: 10px;
  font-weight: bold;
  text-align: center;
}

#callbtn:hover {
  background-color: orange;
  color: white;
  border: 1px solid orange;
  cursor: pointer;
}

#callbtn a {
  color: #507487;
}

#callbtn a:hover {
  color: white;
}

@media screen and (max-width: 768px) {
  #callbtn {
    font-size: 14px;
  }
}

#callbtn i {
  padding-right: 10px;
}

<p class="m-2 text-center" id="callbtn"><i class="fas fa-phone-volume"></i><a href="tel:+441225xxxxxx">Call</a></p>

Answer 1

您的CSS需要将颜色应用于按钮的悬停，而不是链接的悬停

#callbtn:hover a {
   color: #FFF
}

Answer 2

callbtn：hover在按钮悬停时触发，而a：hover在链接悬停时触发。这就是为什么发生这种情况的原因，您将鼠标悬停在按钮上，但未设置链接的颜色。将鼠标悬停在下面的CSS上将为子链接设置样式。

#callbtn:hover a {
  color: white;
}

Answer 3

像这样设置按钮会更有效：

.callbtn {
  display: block;
  border: 1px solid #507487;
  background-color: white;
  color: #507487;
  padding: 10px;
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}

.callbtn:hover {
  border: 1px solid orange;
  background-color: orange;
  color: white;
}

.callbtn i {
  padding-right: 10px;
}

@media screen and (max-width: 768px) {
  .callbtn {
    font-size: 14px;
  }
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<a class="callbtn" href="tel:+441225xxxxxx">
  <i class="fas fa-phone-volume"></i>Call
</a>

Answer 4

有点奇怪，但是一些JavaScript解决了这个问题：

var callButton = document.body.querySelector("#callbtn");
var callButtonLnk = document.body.querySelector("#callbtn a");
callButton.addEventListener("mouseover", function(){
  callButtonLnk.style.color = "white";
})
callButton.addEventListener("mouseout", function(){
  callButtonLnk.style.color = "#507487";
})