как изменить цвет на белый при наведении на кнопку

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

Это немного странно, но некоторый 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";
})

Answer 2

callbtn: запуск при наведении курсора при наведении курсора на кнопку, и запуск: 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

Ваш CSS должен применять цвет при наведении курсора на кнопку, а не на наведение ссылки

#callbtn:hover a {
   color: #FFF
}