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

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

当按钮悬停在按钮上时触发调用btn：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";
})