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

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

谁能看到我要去的地方吗？

#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>

最佳答案

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

#callbtn:hover a {
  color: white;
}

关于html - 悬停在按钮上时如何使颜色变为白色，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52224325/