为什么 CSS 悬停不适用于 HTML 按钮？

Question

我有那些按钮，我试图让它们在悬停时改变颜色。

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

结果是他们在悬停时没有改变颜色，因此非常感谢任何类型的帮助。我是新来的，如有错误请见谅。

完整代码在 https://codepen.io/stressardo/pen/OJOoMoy 上，我认为它太长了 post 直接放在那里。

Answer 1

将悬停效果应用于 <i> 元素代替。

编辑：我忘记指定此解决方案适用于您的代码笔示例。

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

Answer 2

尝试在其中添加“i”标签。见下文。

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

为什么 CSS 悬停不适用于 HTML 按钮？

Why is CSS hover not applying to HTML buttons?

html

css

colors

hover