我的CSS :hover属性为何失效？Font Awesome图标hover动画无响应

问题根源分析 #

你的代码存在几个导致hover失效的核心问题：

• Font Awesome动态插入的样式优先级可能高于自定义样式
• 页面中的.area装饰元素可能覆盖在图标上方，阻断了hover事件
• 过渡属性与动画属性存在冲突，干扰了hover效果触发

具体修复方案 #

1. 提升自定义样式优先级 #

使用更具体的选择器，确保自定义样式能覆盖Font Awesome默认样式：

.links .fa-brands:hover {
    animation: pulse 3s forwards;
}

2. 让鼠标事件穿透装饰元素 #

如果.area是全屏装饰层，添加pointer-events: none让鼠标事件穿透到下方图标：

.area {
    pointer-events: none;
}

3. 消除过渡与动画的冲突 #

移除.links i上的transition: transform属性，避免和hover动画互相干扰：

.links i {
    font-size: 30px;
    padding-right: 10px;
    /* 移除该行：transition: transform 0.2s ease-in-out; */
}

4. 确保布局能正常触发hover #

给.body-container添加宽度和对齐属性，保证图标区域能正确接收鼠标事件：

.body-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

完整修复后的CSS代码 #

body {
    display: flex;
    height: 100vh;
    margin: 0;
}

.body-container {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.links i {
    font-size: 30px;
    padding-right: 10px;
}

.links .fa-brands:hover {
    animation: pulse 3s forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
}

.fade-in {
    animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
    to {
        opacity: 1;
    }
}

.area {
    pointer-events: none;
}

::-webkit-scrollbar {
    display: none;
}

内容的提问来源于stack exchange，提问作者DamilolaOwonibi