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>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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments