'Why is CSS hover not applying to HTML buttons? [closed]

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.

htmlcsscolorshover


Solution 1:[1]

Try adding "i" tag to it. See below.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nekan123

Related Questions