我来帮你搞定这个悬停切换的效果！你需要的是利用CSS的:hover伪类来实现文本切换和背景色变化，不需要JavaScript就能轻松完成，下面是具体的解决方案：

方案一：双元素切换（直观易维护） #

这种方法通过在每行中放置两个描述元素，分别对应默认状态和悬停状态，然后通过CSS控制它们的显示/隐藏来实现切换。

修改后的HTML结构 #

<div class="container">
  <div class="row">
    <div class="content">string</div>
    <div class="description default">A string is a series of characters.</div>
    <div class="description hover">Strings are used to store text.</div>
  </div>
  <div class="row">
    <div class="content">number</div>
    <div class="description default">A number can be written with, or without decimals.</div>
    <div class="description hover">Numbers can be integers or floats.</div>
  </div>
  <div class="row">
    <div class="content">boolean</div>
    <div class="description default">A boolean can be either true or false.</div>
    <div class="description hover">Booleans are used for logical operations.</div>
  </div>
</div>

对应的CSS代码 #

/* 容器基础样式 */
.container {
  width: 80%;
  margin: 20px auto;
}

/* 每行采用flex布局，让内容横向排列 */
.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  gap: 20px;
  /* 可选：添加鼠标指针样式，提示可交互 */
  cursor: pointer;
}

/* 左侧内容样式 */
.content {
  font-weight: bold;
  width: 100px;
}

/* 描述文本的基础样式，添加过渡动画让切换更平滑 */
.description {
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 默认状态的描述文本 */
.description.default {
  background-color: #f0f0f0;
  display: block;
}

/* 悬停状态的描述文本，默认隐藏 */
.description.hover {
  background-color: #e3f2fd;
  display: none;
}

/* 鼠标悬停在row上时，切换两个描述元素的显示状态 */
.row:hover .description.default {
  display: none;
}

.row:hover .description.hover {
  display: block;
}

方案二：利用CSS属性与伪元素（无额外DOM元素） #

如果不想添加额外的DOM元素，也可以通过data-*属性存储悬停文本，结合CSS伪元素来实现内容替换：

HTML结构 #

<div class="container">
  <div class="row" data-hover-text="Strings are used to store text.">
    <div class="content">string</div>
    <div class="description">A string is a series of characters.</div>
  </div>
  <div class="row" data-hover-text="Numbers can be integers or floats.">
    <div class="content">number</div>
    <div class="description">A number can be written with, or without decimals.</div>
  </div>
  <div class="row" data-hover-text="Booleans are used for logical operations.">
    <div class="content">boolean</div>
    <div class="description">A boolean can be either true or false.</div>
  </div>
</div>

CSS代码 #

.container {
  width: 80%;
  margin: 20px auto;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  gap: 20px;
  cursor: pointer;
  position: relative;
}

.content {
  font-weight: bold;
  width: 100px;
}

.description {
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #f0f0f0;
  transition: all 0.3s ease;
}

/* 悬停时改变背景色并隐藏原文本 */
.row:hover .description {
  background-color: #e3f2fd;
  visibility: hidden;
}

/* 利用伪元素显示悬停文本 */
.row:hover::after {
  content: attr(data-hover-text);
  position: absolute;
  left: 120px; /* 和content的宽度+gap对应 */
  padding: 6px 12px;
  border-radius: 4px;
  background-color: #e3f2fd;
  transition: all 0.3s ease;
}

两种方案都能实现你要的效果：鼠标悬停在任意一行时，右侧文本切换成预设内容，同时背景色跟着变化。方案一的可读性和维护性更好，推荐优先使用~

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