图片Hover效果超出边界致导航下拉菜单无法点击的技术求助

咱们先拆解下你遇到的两个核心问题：

1. 鼠标移出图片边界后hover效果仍生效：这是因为你的.post元素设置了width:90%，但图片又额外加了margin-left:10%，导致.post左侧存在10%的空白区域（这个区域属于.post的触发范围），所以鼠标移到这里时，依然会触发hover效果。
2. 部门下拉菜单无法点击：.post-s是绝对定位元素，它的宽度设置为90%且没有限制在图片范围内，直接覆盖到了下拉菜单的位置，导致菜单被遮挡无法响应点击。

接下来是具体的修复步骤：

步骤1：修正HTML的class属性错误 #

你当前的HTML里.post元素写了两个class属性，这不符合规范，需要合并成一个：

<div class="post zoomimage">
  <img src="https://gymkhana.iitb.ac.in/~nss/assets/images/EventsBG.png" alt="Eventimg">
  <div class="post-s">
    <p>John DoeEvents tries to make sure that our services to mankind find their destination. The department is very versatile with regard to the kind of activities contributing towards the upliftment of society. Helping the underprivileged by providing them with necessary amenities can be attributed as the cornerstone of what we do. Ranging from welfare of construction workers to spreading awareness about various social problems through blogs and street plays, NSS Events aims to serve the society in the most satisfying ways.</p>
  </div>
</div>

步骤2：调整CSS，让.post完全包裹图片 #

我们把图片的外边距转移到.post上，同时让.post的尺寸完全匹配图片的显示范围，这样hover就只会在图片区域触发：

.post{
  /* 去掉固定宽度，让元素宽度自适应内容 */
  /* width: 90%; */
  display: inline-block;
  height: 100%;
  position:relative;
  cursor: pointer;
  /* 把原来图片的margin移到这里 */
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
  overflow: hidden; /* 确保内部元素不会超出圆角范围 */
}

.post img{
  display: block; /* 消除inline-block带来的间隙 */
  height: 100%;
  width: 100%; /* 充满.post容器 */
  /* 去掉原来的margin和border-radius，交给.post处理 */
  /* margin-top: 7%; */
  /* margin-left: 10%; */
  /* margin-right: 5%; */
  /* border-radius: 20px; */
}

.post-s{
  width: 0px;
  height: 100%;
  background-color: rgba(103, 58, 183, 0.71);
  position: absolute;
  top: 0;
  left: 0; /* 确保从容器左上角开始定位 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 0.7s ease;
}

.post:hover .post-s{
  width: 100%; /* hover时充满.post容器，也就是图片范围 */
  /* 去掉原来的margin，因为已经在.post上设置了 */
  /* margin-top: 7%; */
  /* margin-left: 10%; */
  /* margin-right: 5%; */
  /* border-radius: 20px; */
}

.post-s p{
  color: white;
  font-family: 'Sofia';
  font-size: 35px; /* 补上遗漏的单位 */
  border: 6px solid white;
  padding: 10px 30px;
}

修改后效果：

• .post的范围和图片完全重合，鼠标移出图片后hover效果会立刻消失；
• .post-s只会覆盖图片区域，不会遮挡下方的导航下拉菜单，菜单就能正常点击了。

内容的提问来源于stack exchange，提问作者Shubham K.