CSS:hover 问题：鼠标悬停时无法显示隐藏文本框

我一眼就看出问题所在啦！你当前的CSS是让#siteHover这个元素自身被悬停时才显示，但它初始状态是opacity: 0——也就是说，这个元素虽然占着页面空间，但你根本看不到它！所以只有当鼠标刚好移到它“隐身”的位置时，hover事件才会触发，这就是你遇到的奇怪现象。

要实现“鼠标悬停在某个可见元素上时显示信息框”的效果，我们需要调整结构和CSS逻辑：

步骤1：调整HTML结构 #

首先要添加一个可见的触发元素（比如你想让用户悬停的文本/按钮），并确保信息框的父容器有定位上下文：

<div class="sitevAlign">
  <!-- 新增的触发元素，用户悬停这个来显示信息框 -->
  <p class="siteTrigger">悬停我查看网站说明</p>
  <!-- 原来的信息框 -->
  <p id="siteHover">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
</div>

步骤2：修改CSS逻辑 #

我们要让触发元素被悬停时显示信息框，同时修正定位问题：

/* 给父容器设置相对定位，让信息框的绝对定位相对于它 */
.sitevAlign {
  position: relative;
  /* 给触发元素留足够空间，避免信息框覆盖它 */
  margin-bottom: 20px;
}

/* 触发元素样式，可根据需求自定义 */
.siteTrigger {
  cursor: pointer;
  color: #2c3e50;
  text-decoration: underline;
}

#siteHover {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  width: 475px;
  padding: 15px;
  position: absolute;
  /* 调整定位到触发元素下方 */
  top: 100%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, 0);
  /* 添加过渡动画，让显示/隐藏更平滑 */
  transition: opacity 0.3s ease;
  /* 确保信息框在其他元素上方 */
  z-index: 10;
}

/* 关键：当触发元素被悬停时，显示信息框 */
.siteTrigger:hover + #siteHover {
  opacity: 1;
}

/* 可选优化：鼠标在信息框上时保持显示，避免移开触发元素就消失 */
#siteHover:hover {
  opacity: 1;
}

关键修改点解释 #

• 给.sitevAlign设置position: relative：让#siteHover的position: absolute相对于父容器定位，不会乱跑。
• 把hover事件绑定到可见的触发元素上：这样用户悬停可见内容时，信息框才会显示，符合预期交互逻辑。
• 添加transition：让信息框的显示/隐藏有平滑过渡，提升用户体验。
• 可选的#siteHover:hover：确保用户鼠标移到信息框上时，它不会消失，方便阅读内容。

如果你不想新增触发元素，而是想让整个.sitevAlign容器作为触发区域，可以把CSS里的.siteTrigger:hover + #siteHover改成.sitevAlign:hover #siteHover，这样只要悬停在父容器范围内就会显示信息框。

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