如何用CSS实现hover时切换不同SVG图片 无需使用复杂JS

完全可以仅通过CSS实现需求，不需要编写任何JS代码，下面提供两种常用实现方案：

方案1：DOM元素显隐切换（推荐，修改成本低） #

第一步：调整HTML结构 #

将两个SVG放到同一个父容器内，给元素添加对应类名方便样式控制：

<div class="card-wrapper">
  <!-- 默认显示的卡片SVG -->
  <svg class="card-default" width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 原卡片SVG内容保持不变即可，此处省略重复内容 -->
  </svg>
  <!-- hover显示的爱心SVG -->
  <svg class="card-hover" width="102" height="88" viewBox="0 0 102 88" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 原hover SVG内容保持不变即可，此处省略重复内容 -->
  </svg>
</div>

第二步：编写CSS样式 #

通过hover伪类控制两个SVG的显隐，同时调整hover状态下的对齐方式：

.card-wrapper {
  width: 179px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* 默认状态：显示原卡片，隐藏hover爱心 */
.card-default {
  display: block;
}
.card-hover {
  display: none;
}
/* hover状态：切换显隐 */
.card-wrapper:hover .card-default {
  display: none;
}
.card-wrapper:hover .card-hover {
  display: block;
}

方案2：背景图切换方案（DOM结构更简洁） #

如果不想在HTML中保留hover状态的SVG，可以将SVG转为data URI直接写在CSS中，无需单独存为图片文件：

第一步：调整HTML #

只保留默认卡片SVG，父容器加类名：

<div class="card-bg-wrapper">
  <svg class="card-default" width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
    <!-- 原卡片SVG内容保持不变即可，此处省略重复内容 -->
  </svg>
</div>

第二步：编写CSS #

hover时隐藏原SVG，父容器显示爱心SVG背景：

.card-bg-wrapper {
  width: 179px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.card-bg-wrapper:hover .card-default {
  display: none;
}
.card-bg-wrapper:hover {
  /* 直接填入转义后的SVG data URI即可 */
  background: url('data:image/svg+xml;utf8,<svg width="102" height="88" viewBox="0 0 102 88" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.0806 39.4139L51.082 74.4153L86.0834 39.4139C89.1779 36.3194 90.9164 32.1223 90.9164 27.7459C90.9164 23.3695 89.1779 19.1724 86.0834 16.0779C84.5511 14.5456 82.732 13.3301 80.73 12.5009C78.728 11.6716 76.5823 11.2448 74.4153 11.2448C70.039 11.2448 65.8419 12.9833 62.7473 16.0779L51.082 27.7431L39.4167 16.0834C36.3143 13.0303 32.1311 11.3269 27.7784 11.3441C23.4258 11.3613 19.2562 13.0978 16.178 16.1752C13.0998 19.2527 11.3624 23.4219 11.3441 27.7745C11.3259 32.1272 13.0283 36.3108 16.0806 39.4139ZM47.1936 8.2955L51.082 12.1839L54.9704 8.2955C57.5199 5.72358 60.5523 3.68056 63.8935 2.28372C67.2347 0.886878 70.8189 0.163735 74.4403 0.155805C78.0617 0.147875 81.649 0.855314 84.9963 2.23751C88.3435 3.6197 91.3848 5.64943 93.9456 8.21016C96.5063 10.7709 98.536 13.8122 99.9182 17.1595C101.3 20.5067 102.008 24.094 102 27.7155C101.992 31.3369 101.269 34.921 99.872 38.2622C98.4752 41.6034 96.4322 44.6358 93.8602 47.1853L54.9759 86.0751C54.4651 86.5864 53.8586 86.9921 53.1909 87.2689C52.5232 87.5457 51.8075 87.6881 51.0848 87.6881C50.362 87.6881 49.6463 87.5457 48.9786 87.2689C48.3109 86.9921 47.7044 86.5864 47.1936 86.0751L8.30379 47.1908C5.69689 44.6495 3.62055 41.6159 2.1952 38.2659C0.769861 34.9159 0.0238901 31.3162 0.000564486 27.6757C-0.0227611 24.0352 0.677023 20.4262 2.05932 17.0582C3.44162 13.6903 5.47892 10.6303 8.05304 8.05579C10.6272 5.48131 13.6869 3.44358 17.0546 2.0608C20.4224 0.678024 24.0313 -0.0222708 27.6718 0.000539839C31.3123 0.0233505 34.9121 0.768812 38.2623 2.19368C41.6125 3.61855 44.6464 5.69446 47.1881 8.301L47.1936 8.2955Z" fill="%23B3B3B3"/></svg>') no-repeat center;
}

注意：如果SVG内容里有#需要转义为%23，避免data URI识别出错。

两种方案都可以实现hover时完全隐藏原卡片SVG、仅显示目标hover图片的需求，无布局抖动问题。

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