Why is CSS hover not applying to HTML buttons?

February 25, 2022

I have those buttons and I tried to make them to change color on hover.

.social:hover {
  cursor: pointer;
  color: #28ad00;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td class="animated zoomIn" style="animation-delay:2.6s;"><a href="" target="_blank" class="social"><i class="fab fa-spotify"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.0s;"><a href="" target="_blank" class="social"><i class="fab fa-twitter"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.4s;"><a href="" target="_blank" class="social"><i class="fab fa-instagram"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.8s;"><a href="" target="_blank" class="social"><i class="fab fa-discord"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:4.2s;"><a href="" target="_blank" class="social"><i class="fab fa-github"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:4.6s;"><a href="" target="_blank" class="social"><i class="fa-solid fa-envelope"></i></a></td>
  </tr>
</table>

The result is them not changing the color on hover, so any type of help is greatly appreciated. I’m new here, sorry for any mistakes.

Full code is on https://codepen.io/stressardo/pen/OJOoMoy, I assume it’s too long to post it there directly.

>Solution :

Apply the hover effect to the <i>
element instead.

Edit: I forgot to specify this solution works in your codepen example.

.social i:hover {
    cursor: pointer;
    color:#28ad00;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td class="animated zoomIn" style="animation-delay:2.6s;"><a href="" target="_blank" class="social"><i class="fab fa-spotify"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.0s;"><a href="" target="_blank" class="social"><i class="fab fa-twitter"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.4s;"><a href="" target="_blank" class="social"><i class="fab fa-instagram"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:3.8s;"><a href="" target="_blank" class="social"><i class="fab fa-discord"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:4.2s;"><a href="" target="_blank" class="social"><i class="fab fa-github"></i></a></td>
    <td class="animated zoomIn" style="animation-delay:4.6s;"><a href="" target="_blank" class="social"><i class="fa-solid fa-envelope"></i></a></td>
  </tr>
</table>