如何实现鼠标悬停SVG房屋图标时切换显示‘Home’文本？

数据老陈

2026-8-13

实现SVG房屋图标悬停切换为“Home”文本

直接用content替换SVG的方法行不通，因为CSS的content属性无法直接替换SVG元素的内容。正确的做法是把SVG和文本放在同一个容器中，通过:hover状态控制两者的显示与隐藏。

实现代码

HTML结构

<li routerLink="/home" class="home-container">
  <!-- SVG房屋图标 -->
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="house" class="home-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" color="#4d4d4e">
    <path fill="currentColor" d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
  </svg>
  <!-- 悬停显示的文本 -->
  <span class="home-text">Home</span>
</li>

CSS样式

/* 容器设置，确保图标和文本对齐 */
.home-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 默认隐藏文本 */
.home-text {
  display: none;
  /* 可选：调整文本样式，和图标对齐 */
  color: #4d4d4e;
  font-size: 16px;
}

/* 默认显示图标 */
.home-icon {
  display: inline-block;
}

/* 悬停时隐藏图标，显示文本 */
.home-container:hover .home-icon {
  display: none;
}

.home-container:hover .home-text {
  display: inline-block;
}