如何实现鼠标悬停卡片时切换整个Div的内容？

你要实现的「悬停单个卡片切换整个div内容」效果，纯CSS可以实现，但有局限性；JavaScript方案更灵活通用，以下是两种方案的具体实现：

一、纯CSS方案（依赖固定结构） #

这种方案需要调整HTML结构，将触发hover的导航项和内容区放在同一容器下，利用CSS兄弟选择器控制内容的显示隐藏。

调整后的HTML #

<div class="partitions__wrapper">
  <!-- 悬停触发项 -->
  <div class="partition-trigger">Interior Design</div>
  <div class="partition-trigger">Author's Supervision</div>
  <div class="partition-trigger">Other Service</div>

  <!-- 对应内容区 -->
  <div class="partition-content active">
    <h2 class="partition__title">Interior Design</h2>
    <p class="partition__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition-content">
    <h2 class="partition__title">Author's Supervision</h2>
    <p class="partition__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <a class="border-button">See more</a>
  </div>
  <div class="partition-content">
    <h2 class="partition__title">Other Service</h2>
    <p class="partition__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a class="border-button">See more</a>
  </div>
</div>

配套CSS #

.partitions__wrapper {
  position: relative;
  background-color: #f5f5f5;
  padding: 50px;
  text-align: center;
}

.partition-trigger {
  display: inline-block;
  margin: 0 20px;
  padding: 10px;
  cursor: pointer;
  transition: color 0.3s;
}

.partition-trigger:hover {
  color: #666;
}

.partition-content {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  display: none;
}

/* 默认显示第一个内容 */
.partition-content.active {
  display: block;
}

/* 悬停第一个触发项时，显示对应内容 */
.partition-trigger:nth-child(1):hover ~ .partition-content:nth-child(4) {
  display: block;
}
.partition-trigger:nth-child(1):hover ~ .partition-content:not(:nth-child(4)) {
  display: none;
}

/* 悬停第二个触发项时，显示对应内容 */
.partition-trigger:nth-child(2):hover ~ .partition-content:nth-child(5) {
  display: block;
}
.partition-trigger:nth-child(2):hover ~ .partition-content:not(:nth-child(5)) {
  display: none;
}

/* 悬停第三个触发项时，显示对应内容 */
.partition-trigger:nth-child(3):hover ~ .partition-content:nth-child(6) {
  display: block;
}
.partition-trigger:nth-child(3):hover ~ .partition-content:not(:nth-child(6)) {
  display: none;
}

/* 保留原有的样式 */
.partition__title {
  padding: 80px 0;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: -80px;
}

.partition__text {
  font-size: 16px;
  line-height: 1.5;
}

.border-button {
  text-decoration: none;
  font-family: "athens";
  display: inline-block;
  position: relative;
  padding: 12px 8px;
  color: #000;
  overflow: hidden;
  cursor: pointer;
  background-image: linear-gradient(to right, #000 33%, #0000 33% 66%, #000 66%);
  background-position: right bottom;
  background-size: 300% 1px;
  background-repeat: no-repeat;
}

.border-button:hover {
  background-position: left bottom;
  transition: background-position 1s;
}

a:hover {
  color: black;
}

CSS方案局限

• 必须严格固定触发项和内容区的HTML顺序，新增内容时需要手动添加对应的CSS选择器；
• 鼠标离开触发项后，内容会回到默认状态，无法保持选中效果（除非结合:focus，但需要点击触发）。

二、JavaScript方案（灵活通用） #

JS方案不需要依赖固定结构，扩展性强，还能轻松扩展点击选中、状态保持等功能。

调整后的HTML #

<div class="partitions__wrapper">
  <div class="partition-nav">
    <div class="partition-nav-item" data-content="interior">Interior Design</div>
    <div class="partition-nav-item" data-content="supervision">Author's Supervision</div>
    <div class="partition-nav-item" data-content="other">Other Service</div>
  </div>

  <div class="partition-content-wrapper">
    <div class="partition-content" id="interior">
      <h2 class="partition__title">Interior Design</h2>
      <p class="partition__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a class="border-button">See more</a>
    </div>
    <div class="partition-content" id="supervision">
      <h2 class="partition__title">Author's Supervision</h2>
      <p class="partition__text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a class="border-button">See more</a>
    </div>
    <div class="partition-content" id="other">
      <h2 class="partition__title">Other Service</h2>
      <p class="partition__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a class="border-button">See more</a>
    </div>
  </div>
</div>

配套CSS #

.partitions__wrapper {
  background-color: #f5f5f5;
  padding: 50px;
  text-align: center;
}

.partition-nav {
  margin-bottom: 40px;
}

.partition-nav-item {
  display: inline-block;
  margin: 0 20px;
  padding: 10px;
  cursor: pointer;
  font-weight: 500;
  transition: color 0.3s;
}

.partition-nav-item:hover {
  color: #666;
}

.partition-content {
  display: none;
  width: 60%;
  margin: 0 auto;
}

/* 默认显示第一个内容 */
.partition-content.active {
  display: block;
}

/* 保留原有的样式 */
.partition__title {
  padding: 80px 0;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: -80px;
}

.partition__text {
  font-size: 16px;
  line-height: 1.5;
}

.border-button {
  text-decoration: none;
  font-family: "athens";
  display: inline-block;
  position: relative;
  padding: 12px 8px;
  color: #000;
  overflow: hidden;
  cursor: pointer;
  background-image: linear-gradient(to right, #000 33%, #0000 33% 66%, #000 66%);
  background-position: right bottom;
  background-size: 300% 1px;
  background-repeat: no-repeat;
}

.border-button:hover {
  background-position: left bottom;
  transition: background-position 1s;
}

a:hover {
  color: black;
}

JavaScript代码 #

// 获取所有导航项和内容项
const navItems = document.querySelectorAll('.partition-nav-item');
const contentItems = document.querySelectorAll('.partition-content');

// 默认激活第一个内容
contentItems[0].classList.add('active');

// 给每个导航项绑定hover事件
navItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    // 移除所有内容的激活状态
    contentItems.forEach(content => content.classList.remove('active'));
    // 获取当前导航项对应的内容ID
    const targetId = item.getAttribute('data-content');
    // 激活对应内容
    document.getElementById(targetId).classList.add('active');
  });
});

JS方案优势

• 不依赖HTML结构顺序，新增内容只需添加对应导航项和内容区，无需修改JS逻辑；
• 可轻松扩展功能，比如点击导航项保持选中状态、添加过渡动画等；
• 交互逻辑更灵活，能处理复杂的状态切换需求。

内容的提问来源于stack exchange，提问作者Elia d'Albenzio