鼠标悬停Div切换Section背景图：仅用HTML/CSS可实现吗？

首先给你吃个定心丸：不用JavaScript，仅靠HTML+CSS就可以实现鼠标悬停Div切换Section背景图，还能加上平滑过渡效果，刚好能满足你复刻目标区块的需求～

核心实现思路 #

原理很简单：用CSS的:hover伪类关联可交互的Div和Section的背景层，再配合transition属性实现平滑过渡。这里给你一个极简的示例框架，你可以套用到你的代码里：

1. HTML结构调整

把Section拆成「背景层」和「交互项」两部分，让交互项和背景层是兄弟关系，方便用CSS选择器关联：

<section class="features">
  <!-- 背景层，负责显示切换的图片 -->
  <div class="features-bg"></div>
  
  <!-- 你的功能区块项，每个对应一张背景图 -->
  <div class="feature-item">
    <div class="feature-icon">图标1</div>
    <h3>功能文本1</h3>
    <p>描述内容1</p>
  </div>
  <div class="feature-item">
    <div class="feature-icon">图标2</div>
    <h3>功能文本2</h3>
    <p>描述内容2</p>
  </div>
</section>

2. CSS关键代码

给背景层加过渡属性，然后通过:hover伪类+兄弟选择器，让鼠标悬停每个功能项时切换背景图：

.features {
  width: 100%;
  height: 500px; /* 根据你的需求调整高度 */
  position: relative;
  overflow: hidden;
}

.features-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(默认背景图路径);
  background-size: cover;
  background-position: center;
  /* 核心：添加过渡效果，让背景切换更平滑 */
  transition: background-image 0.6s ease-in-out;
  z-index: 0; /* 把背景层放在交互项下面 */
}

.feature-item {
  position: relative;
  z-index: 1; /* 确保交互项能被点击/悬停 */
  padding: 2rem;
  cursor: pointer;
  /* 这里可以加你自己的文本、图标样式 */
}

/* 悬停第一个功能项时，切换背景图 */
.feature-item:nth-child(2):hover ~ .features-bg {
  background-image: url(对应背景图1路径);
}

/* 悬停第二个功能项时，切换背景图 */
.feature-item:nth-child(3):hover ~ .features-bg {
  background-image: url(对应背景图2路径);
}

额外提示 #

• 如果你的功能项数量较多，用nth-child会有点麻烦，可以试试**CSS自定义属性（变量）**来简化代码，维护起来更方便。
• 目标网站的功能区块里的文本动画、图标变化，也都可以用CSS的:hover+transition或者transform属性实现，完全不需要JS。
• 如果你之前没实现过渡效果，大概率是没给background-image添加transition属性，或者背景图的路径有问题，可以检查一下这两点～

首次提问就能把需求描述得这么清晰，很棒呀！如果调试过程中遇到具体问题，随时再问就行～

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