SVG图标鼠标悬停可见性切换失效解决及无限CSS动画实现指导

架构老林

2026-4-30

解决SVG图标悬停切换与自动循环动画问题

一、修复鼠标悬停切换图标的问题

你原来的CSS逻辑有个小漏洞：当你悬停在#icon1上时，它会立刻隐藏，鼠标瞬间失去hover目标，效果会一闪而过；而#icon2初始是隐藏状态，根本无法被hover触发。正确的思路是监听整个SVG容器的hover事件，同时切换两个图标的可见性。

修改后的代码如下：

调整后的CSS

/* 初始状态：显示icon1，隐藏icon2 */
#icon1 { visibility: visible; }
#icon2 { visibility: hidden; }

/* 当hover整个SVG容器时，切换两个图标的状态 */
.bi-emoji-smile:hover #icon1 { visibility: hidden; }
.bi-emoji-smile:hover #icon2 { visibility: visible; }

对应的SVG代码（仅需保证容器class正确，内部id不变）

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="#E0EADF" class="bi bi-emoji-smile mr-2" viewBox="0 0 17 17" style="position: relative;top: 0px;left: 0px;">
 <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
 <path id="icon1" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
 <path id="icon2" d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5.5 0 0 1 .68.194.934.934 0 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1 .194-.68z"/>
</svg>

我把SVG内部path的visibility属性移到了CSS里统一控制，这样后续调整会更方便。

二、实现5秒间隔无限切换的CSS动画

要让图标自动循环切换，我们可以用CSS @keyframes 动画。这里推荐结合opacity和visibility实现，因为visibility本身无法做平滑过渡，但配合opacity能让切换更自然：

动画CSS代码

/* 初始状态和基础样式 */
#icon1 { 
  visibility: visible;
  opacity: 1;
  transition: all 0.3s ease; /* 可选：添加过渡动画让切换更平滑 */
}
#icon2 { 
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

/* 定义循环动画 */
@keyframes toggleEmoji {
  0%, 49% {
    /* 前5秒显示icon1，隐藏icon2 */
    #icon1 { visibility: visible; opacity: 1; }
    #icon2 { visibility: hidden; opacity: 0; }
  }
  50%, 100% {
    /* 后5秒隐藏icon1，显示icon2 */
    #icon1 { visibility: hidden; opacity: 0; }
    #icon2 { visibility: visible; opacity: 1; }
  }
}

/* 给SVG容器应用动画 */
.bi-emoji-smile {
  animation: toggleEmoji 10s infinite; /* 10秒一个周期（5秒显示+5秒切换），无限循环 */
}

如果不需要平滑过渡，可以去掉transition属性，直接用visibility切换即可。动画时长设为10秒是因为要包含两个5秒的状态阶段。

同时启用悬停和自动动画

如果想让悬停时暂停自动动画，优先触发悬停效果，可以再加一段CSS：

.bi-emoji-smile:hover {
  animation-play-state: paused; /* 悬停时暂停动画 */
}

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