鼠标悬停兄弟元素时触发SVG路径animation-play-state的问题

嘿，我来帮你搞定这个悬停触发兄弟SVG路径动画的问题！

首先咱们得先揪出问题根源：你说单独CSS动画正常，但hover兄弟元素时失效，大概率是CSS选择器没正确命中目标SVG路径，或者SVG的DOM层级结构让兄弟选择器无法生效。下面给你两种不用jQuery的解决方案：

方案一：修正CSS选择器（最简单，适合结构规整的情况） #

先确认你的HTML结构，比如触发元素和SVG是不是平级的兄弟节点？举个常见的结构例子：

<div class="hover-trigger">悬停我触发动画</div>
<svg class="icon-svg" viewBox="0 0 200 200">
  <path class="target-path" d="M20,20 L180,20 L180,180 L20,180 Z" />
</svg>

你的基础动画CSS没问题，但触发动画的选择器写错了！如果目标路径在SVG内部，你得用兄弟选择器+后代选择器才能命中它：

/* 基础动画（保留你的原有代码） */
.target-path {
  stroke: #2c3e50;
  stroke-width: 3;
  fill: transparent;
  stroke-dasharray: 640; /* 路径总长度，根据你的实际路径调整 */
  stroke-dashoffset: 640;
}

@keyframes wrap-animation {
  to {
    stroke-dashoffset: 0;
  }
}

/* 修正后的触发选择器 */
.hover-trigger:hover ~ .icon-svg .target-path {
  animation: wrap-animation 1.5s forwards;
}

这里的~是通用兄弟选择器，能选中触发元素后面所有平级的SVG，再通过.icon-svg .target-path选中SVG内部的路径，这样hover触发元素时就能正确启动动画了！

方案二：原生JS控制（适合复杂DOM结构） #

如果你的DOM结构比较嵌套，CSS选择器搞不定，那就用原生JS来监听hover事件，手动控制动画：

// 获取触发元素和目标路径
const trigger = document.querySelector('.hover-trigger');
const pathElement = document.querySelector('.target-path');

// 鼠标进入时启动动画
trigger.addEventListener('mouseenter', () => {
  pathElement.classList.add('animate-path');
});

// 鼠标离开时重置动画（让下次hover能重新触发）
trigger.addEventListener('mouseleave', () => {
  pathElement.classList.remove('animate-path');
  // 强制浏览器重绘，解决动画无法重复触发的问题
  void pathElement.offsetWidth;
});

对应的CSS只要把动画放到类里就行：

.animate-path {
  animation: wrap-animation 1.5s forwards;
}

这里加void pathElement.offsetWidth是因为直接移除再添加类时，浏览器可能不会重新触发动画，强制重绘能刷新元素状态，让动画每次hover都能正常运行。

额外排查点 #

1. 确认你的SVG路径的stroke-dasharray和stroke-dashoffset值是正确的，要等于路径的总长度（可以用JS的pathElement.getTotalLength()获取准确值）
2. 检查触发元素和SVG是不是真的在同一个DOM层级下，有没有被其他容器嵌套导致选择器失效

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