Angular 14 CSS Hover失效：箭头图标无法随链接悬停右移

核心问题：类名拼写不匹配 #

你的HTML里箭头元素的类是arrows-right，但CSS中你写的是arrow-right（少了末尾的s），这直接导致选择器无法匹配到目标元素，所以悬停样式完全不生效。

正确的CSS写法（两种方案） #

方案1：使用transform（推荐，无需额外定位）

transform是实现元素位移最简洁的方式，不需要设置元素定位，直接修改位移值即可。注意要向右移动的话，translate的X轴参数用正数（你之前写的-50%是向左移动）：

a.animated-link {
  color: #D1E2FF;

  &:hover {
    color: white;
  }
  // 修正类名拼写，调整位移方向
  &:hover .arrows-right {
    transform: translate(5px, 0);
    // 可选：添加过渡动画让移动更平滑
    transition: transform 0.3s ease;
  }
}

.arrows-right {
  margin-top: 13px;
  margin-left: 10px;
  // 可选：默认状态添加过渡，让动画更自然
  transition: transform 0.3s ease;
}

方案2：使用position + right属性

如果想用right属性控制位置，需要先给箭头元素设置position: relative，否则right属性对静态定位的元素无效：

.arrows-right {
  margin-top: 13px;
  margin-left: 10px;
  // 必须设置相对定位，right属性才会生效
  position: relative;
  transition: right 0.3s ease;
}

a.animated-link {
  color: #D1E2FF;

  &:hover {
    color: white;
  }
  &:hover .arrows-right {
    // 向右移动10px（根据需求调整数值）
    right: -10px;
  }
}

修正后的完整CSS片段（整合到你的代码中） #

把错误的类名和样式替换成以下内容即可：

@import "/src/assets/style/variables";

@background-black: #4A4A4A;

.footer-wrap {
  width: 100%;

  .links-footer-wrap {
    padding: 50px 0;
    background: @background-black;

    .col {
      padding: 0 45px;
      border-left: 1px solid @border-gray;

      &:first-child {
        border: none;
        padding-left: 0;
      }

      .col-title {
        color: white;
        font-size: 28px;
        margin-bottom: 10px;
      }

      .link-list-wrap {
        display: flex;
        justify-content: space-between;
      }

      .link {
        min-width: 205px;
        margin-bottom: 10px;
      }

      a.animated-link {
        color: #D1E2FF;

        &:hover {
          color: white;
        }
        // 修正类名并设置正确的位移
        &:hover .arrows-right {
          transform: translate(5px, 0);
          transition: transform 0.3s ease;
        }
      }

      img {
        width: 100%;
        margin-bottom: 10px;
      }
    }
  }

  .arrows-right {
    margin-top: 13px;
    margin-left: 10px;
    transition: transform 0.3s ease;
  }

  .privacy-footer-wrap {
    font-size: 13px;
    padding: 15px 0;
    background: #F7F4EE;

    .privacy-footer {
      display: flex;
      justify-content: space-between;

      .policy-link-wrap {
        width: 210px;

        .privacy-link {
          color: @link-blue;
          font-weight: bold;

          &:hover {
            color: @hover-blue;
          }
        }
      }
    }
  }
}

补充说明 #

• 嵌套结构的写法本身是合理的，问题完全出在类名拼写错误和位移方向设置反了。
• 添加transition属性可以让箭头的移动更平滑，提升用户体验，建议保留。

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