如何实现文本hover时显示图标与下划线动画效果

问题描述 #

我在CSS中实现了鼠标悬停文本时下划线展开、移开时下划线收起的效果。现在希望图标能和下划线同步显示隐藏，但设置display:block后，下划线的hover效果失效了。

解决方案 #

核心思路是利用父元素（<a>标签）的hover状态同时控制下划线和图标，而非给图标单独设置hover（隐藏状态下的图标无法触发自身hover），同时调整图标样式避免干扰父元素的hover触发：

1. 移除图标自身的.sobreImg:hover规则，因为隐藏状态下鼠标无法触碰到图标，该规则完全无效
2. 通过父元素的.sobre:hover来控制图标的显示，实现和下划线的同步触发
3. 用opacity配合过渡动画替代visibility，实现和下划线一致的顺滑效果，同时不影响父元素的hover区域
4. 移除.sobre的固定宽度，避免图标超出父元素范围导致hover触发中断

修改后的CSS代码 #

/* 全局样式保留，仅修改相关部分 */
.navbar {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 40px;
    position: absolute;
    width: 639.98px;
    height: 32px;
    left: 363px;
    top: 72px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding-top: 72px;
}

.sobre {
    /* 去掉固定宽度，让父元素自适应内容+图标 */
    height: 32px;
    flex: none;
    order: 0;
    flex-grow: 0;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 20.7558px;
    line-height: 28px;
    text-decoration: none;
    position: relative;
    /* 增加右侧内边距，确保图标在父元素hover范围内 */
    padding-right: 30px;

    /* 渐变下划线 */
    background-image: linear-gradient(90deg, rgba(251, 62, 107, 0.95) 10%, #8F00FF 91.6%);
    background-size: 40% 3px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
}

.sobreImg {
    position: absolute;
    left: calc(100% + 5px); /* 用calc让图标自动紧跟文本右侧 */
    top: 2px;
    opacity: 0; /* 初始透明隐藏 */
    transition: opacity 300ms ease; /* 和下划线过渡时长保持一致 */
}

/* 父元素hover时同时触发下划线展开和图标显示 */
.sobre:hover {
    background-size: 100% 3px;
}

.sobre:hover .sobreImg {
    opacity: 1; /* hover时显示图标 */
}

批量优化所有导航项（可选） #

如果要给所有导航项（ferramentas、contato等）添加相同效果，可以用通用类减少重复代码：

通用CSS代码

.nav-item {
    height: 32px;
    flex: none;
    flex-grow: 0;
    color: white;
    font-family: 'Outfit', sans-serif;
    font-style: normal;
    font-weight: 900;
    font-size: 20.7558px;
    line-height: 28px;
    text-decoration: none;
    position: relative;
    padding-right: 30px;
    background-image: linear-gradient(90deg, rgba(251, 62, 107, 0.95) 10%, #8F00FF 91.6%);
    background-size: 40% 3px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 300ms ease;
}

.nav-item img {
    position: absolute;
    left: calc(100% + 5px);
    top: 2px;
    opacity: 0;
    transition: opacity 300ms ease;
}

.nav-item:hover {
    background-size: 100% 3px;
}

.nav-item:hover img {
    opacity: 1;
}

对应HTML修改

<nav class="navbar">
  <!--  <a class="home" routerLink="/">home</a> -->
  <a class="nav-item ferramentas" routerLink="/">ferramentas
    <img src="../assets/icones/ferramentas.svg">
  </a>
  <a class="nav-item contato" routerLink="/">contato
    <img src="../assets/icones/contato.svg">
  </a>
  <a class="nav-item projetos" routerLink="/">projetos
    <img src="../assets/icones/projetos.svg">
  </a>
  <a class="nav-item sobre" routerLink="/">sobre mim
    <img src="../assets/icones/sobremim.svg">
  </a>
  <a class="nav-item skills" routerLink="/">soft skills
    <img src="../assets/icones/soft.svg">
  </a>
</nav>
<router-outlet></router-outlet>

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