CSS:hover 触发显示半透明文本框失效问题排查

我一眼就看到你代码里的问题啦，主要是选择器写错了，还有元素层级关系导致相邻兄弟选择器没法生效，咱们一步步来改：

问题分析 #

1. 你给<a>标签加了id="Home"，所以#Home本身就是这个链接元素，而#Home a:hover是在找#Home里面的子<a>，这显然不存在，所以这个选择器根本不会触发任何效果。
2. 你的#siteText是和包含<a>的<p>同级的元素，不是<a>的兄弟，所以用+相邻兄弟选择器没法直接从<a>触发到它。

解决方案1：不改动HTML，调整CSS选择器 #

我们可以利用父元素的hover状态来触发文本框显示，当鼠标悬停在包含链接的<p>上时，让后面的#siteText显示出来。同时记得给父容器.site加position:relative，不然绝对定位的#siteText会相对于整个页面定位，位置可能不对。

修改后的CSS代码：

.site {
  position: relative; /* 确保绝对定位的子元素相对于这个容器定位 */
}

#siteText {
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  width: 475px;
  padding: 15px;
  position: absolute;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease; /* 可选：加个过渡动画更丝滑 */
}

/* 当鼠标悬停在包含链接的p上时，显示后面的#siteText */
.site p:first-child:hover ~ #siteText {
  opacity: 1;
}

解决方案2：调整HTML结构，让链接和文本框成为兄弟 #

如果希望严格只在鼠标悬停在链接上时才显示文本框，可以把<a>和#siteText放在同一个父容器里，让它们成为直接兄弟，这样就能用相邻兄弟选择器了：

修改后的HTML：

<div class="site">
  <div style="padding: 10px;">
    <a href="myWebsite.html" id="Home">My Website</a>
    <p id="siteText">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>
</div>

对应的CSS：

.site {
  position: relative;
}

#siteText {
  background-color: rgba(255,255,255,0.8);
  text-align: center;
  width: 475px;
  padding: 15px;
  position: absolute;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* 现在链接和文本框是直接兄弟，hover链接就能触发 */
#Home:hover + #siteText {
  opacity: 1;
}

两种方案都能解决你的问题，选哪种看你对HTML结构的需求~

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