网页开发：鼠标悬停时显示文本的实现问题求助

问题根源 #

你用的li#hover:hover + li#description是相邻兄弟选择器，它只能选中和目标元素处于同一父级下的直接相邻兄弟元素。但你的#hover在.hover-list这个<ul>里，#description却在另一个<div>下的<ul>里，两者层级完全不关联，所以这个选择器根本不会生效。

解决方案一：调整DOM结构，用纯CSS实现 #

把需要显示的元素放到#hover的同一父级下，成为它的相邻兄弟，这样相邻兄弟选择器就能正常工作。

修改后的HTML：

<ul class="hover-list">
  <li id="hover">Hover Me!!</li>
  <li id="description">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum consequatur veritatis facilis est voluptas obcaecati similique illo reiciendis a, eaque minima ullam totam dolor molestias officiis quia suscipit enim temporibus fugiat nulla possimus. Ut recusandae laudantium in rem, nulla corrupti placeat ipsa assumenda consequatur et eveniet inventore voluptates officiis facilis id? Qui suscipit non maiores corporis quas adipisci dicta in enim amet magnam, repellendus, iusto recusandae laudantium sit illo nemo delectus at officia saepe nihil obcaecati! Asperiores deserunt enim excepturi id dolorum hic expedita explicabo? Nesciunt, est ipsam! Velit in nostrum sunt consectetur laudantium ad inventore labore libero ducimus voluptates.
  </li>
</ul>

对应的CSS：

li {
  list-style: none;
}

.hover-list {
  display: flex;
  flex-direction: column; /* 改为垂直排列，避免元素并排 */
  align-items: center;
  justify-content: center;
  gap: 15px; /* 增加按钮和描述框的间距 */
}

li#hover {
  text-align: center;
  background-color: darkslategray;
  padding: 10px 25px;
  border-radius: 50px;
  color: white;
  cursor: pointer; /* 鼠标悬停显示手型，提升交互感 */
}

li#description {
  border: 2px solid black;
  text-align: center;
  padding: 15px;
  font-size: large;
  background-color: darkslategrey;
  color: white;
  display: none; /* 默认隐藏描述框 */
  width: 85%; /* 限制宽度，避免内容过宽 */
  max-width: 600px;
}

/* 相邻兄弟选择器生效，hover时显示描述 */
li#hover:hover + li#description {
  display: block;
}

解决方案二：不修改DOM结构，用JavaScript实现 #

如果无法调整现有DOM结构，直接用JS监听鼠标悬停事件来控制元素显示/隐藏。

首先给#description添加默认隐藏的CSS：

li#description {
  border: 2px solid black;
  text-align: center;
  padding: 10px;
  font-size: large;
  background-color: darkslategrey;
  color: white;
  display: none; /* 默认隐藏 */
}

然后添加JavaScript代码：

// 获取目标元素
const hoverBtn = document.getElementById('hover');
const descriptionBox = document.getElementById('description');

// 监听鼠标移入事件
hoverBtn.addEventListener('mouseover', () => {
  descriptionBox.style.display = 'block';
});

// 监听鼠标移出事件
hoverBtn.addEventListener('mouseout', () => {
  descriptionBox.style.display = 'none';
});

方案对比 #

• 纯CSS方案：代码更简洁，无需JS依赖，但要求DOM结构可以调整。
• JavaScript方案：不受DOM结构限制，灵活性更高，但需要额外编写JS逻辑。

内容的提问来源于stack exchange，提问作者Vishal. C