鼠标悬停切换SVG无效，当前实现方式是否正确？

嘿，我来帮你梳理下这个问题～

你当前用<img>标签引入SVG的方式，确实没办法直接实现鼠标悬停切换SVG的功能，原因主要有两个：

1. CSS本身没有能力修改HTML元素的src属性，所以没法通过:hover伪类直接替换img的SVG源；
2. 用img引入的SVG会被浏览器当作外部独立资源，你没办法通过外部CSS选择器去控制SVG内部的元素样式（比如修改颜色、形状）。

下面根据你的需求场景，给你两种可行的实现思路：

场景1：悬停时切换成另一个SVG文件 #

方法1：用CSS背景图代替img标签 #

把原本的img换成div（或其他块级元素），通过背景图来加载SVG，利用:hover伪类切换背景图：

<div class="bullet"></div>

.bullet {
  width: 5em;
  height: 5em; /* 必须指定高度，背景图不会自动撑开元素 */
  padding: 0.2em;
  margin: 0.2em;
  background-image: url('你的默认SVG路径');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.bullet:hover {
  background-image: url('你要切换的SVG路径');
}

方法2：用JavaScript动态修改src属性 #

如果一定要保留img标签，可以通过JS监听鼠标事件来切换src：

<!-- 把默认路径和悬停路径存在data属性里 -->
<img src="默认.svg" alt="" class="bullet" data-default="默认.svg" data-hover="悬停.svg">

document.querySelectorAll('.bullet').forEach(img => {
  // 鼠标移入时切换到悬停SVG
  img.addEventListener('mouseover', () => {
    img.src = img.dataset.hover;
  });
  // 鼠标移出时切回默认SVG
  img.addEventListener('mouseout', () => {
    img.src = img.dataset.default;
  });
});

场景2：悬停时修改当前SVG的内部样式（比如颜色） #

这种情况不能用img标签，需要把SVG代码直接嵌入到HTML中，这样就能用外部CSS控制SVG内部的元素了：

<svg class="bullet" viewBox="0 0 48 48">
  <!-- 这里是你的SVG内部代码，比如一个圆形 -->
  <circle cx="24" cy="24" r="20" fill="#aaa" />
</svg>

.bullet {
  width: 5em;
  padding: 0.2em;
  margin: 0.2em;
}
/* 悬停时修改SVG内部圆形的填充色 */
.bullet:hover circle {
  fill: #ff4444;
}

简单来说，你当前的实现方式不符合悬停切换SVG的需求，得根据你具体要实现的效果选择上面的方案～

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