CODEWITHSUNDEEP
htmlcss
Bazla
Bazla

Reputation: 137

how to make color change to white when hovering over button

The text color only changes when I hover over the text. I want the text color to change to white when I hover over the button.

Can anyone see where I am going wrong, please?

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

Upvotes: 0

Views: 5461

Answers (4)

Saif Taher
Saif Taher

Reputation: 343

It's a bit weird but some JavaScript solves the problem:

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";
})

Upvotes: -1

Rick Sibley
Rick Sibley

Reputation: 625

It would be more efficient to set your button up like this: 

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

Upvotes: 0

BunkerBilly
BunkerBilly

Reputation: 172

callbtn:hover triggering when the button is hovered over, and a:hover is triggering when the link is hovered over. Which is why this is happening, you are hovering over the button but not setting the colour of the link. The CSS below will set a style to the child link when button is hovered over.

#callbtn:hover a {
  color: white;
}

Upvotes: 2

epascarello
epascarello

Reputation: 207511

Your CSS need to apply the color on hover of the button, not the hover of the link

#callbtn:hover a {
   color: #FFF
}

Upvotes: 4

Related Questions