jQuery实现点击图片切换文本显隐 初始隐藏失效问题排查

代码里有几个核心错误导致初始隐藏不生效：

• CSS属性写错：display 属性不存在 hidden 这个取值，要隐藏元素需要写 display: none，你写的display: hidden属于无效声明，浏览器会直接忽略，所以.overlay默认按正常块级元素渲染显示。
• 隐藏逻辑加错位置：你把hidden类加在了包裹图片和遮罩的外层div上，既没有给.hidden类定义任何隐藏样式，也没有作用到需要隐藏的.overlay元素上，自然不会生效。
• 额外遗漏：你的.Figure容器没有加position: relative，绝对定位的遮罩层会相对于整个页面定位，会出现遮罩错位的问题。另外你写的<p1>是不存在的HTML标签，标准HTML里只有<p>段落标签。

1. 修正.overlay的初始隐藏样式，把无效的display: hidden改为display: none
2. 给.Figure容器添加相对定位，避免遮罩层错位
3. 删掉多余的外层套娃div（就是你加了hidden类的那层无意义容器），把不存在的<p1>标签替换为标准<p>标签
4. 如果需要你写的0.5s过渡淡入淡出效果，把jQuery的toggle()换成fadeToggle()即可，toggle()是直接切换display属性，无法触发CSS过渡动画。

CSS部分 #

.Figure {
  position: relative;
  /* 可根据需求给Figure设置对应宽高，避免图片容器塌陷 */
}
.overlay {
  position: absolute;
  display: none; /* 修正无效的display取值，实现初始隐藏 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.text {
  color: white;
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: Arial;
}

JS部分 #

$('.Figure').on('click', function() {
  // 不需要显隐动画就保留toggle()，要平滑淡入淡出效果就用fadeToggle()
  $(this).find('.overlay').fadeToggle();
});

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="Figure">
  <img class="pics" src="photos/image1.JPG" />
  <div class="overlay">
    <p class="text">xxxx</p>
  </div>
</div>
<div class="Figure">
  <img class="pics" src="photos/mel.jpeg" />
  <div class="overlay">
    <p class="text">xxx</p>
  </div>
</div>

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