点击父div无法将visibility:hidden的子img设为可见如何解决

你的代码不生效核心是事件绑定逻辑错误：

• 你把点击事件onclick="displayLock(4)"绑定在了本身被设置为visibility: hidden的img#sq4元素上，设置了visibility: hidden的元素不会响应任何鼠标交互事件，无论你怎么点击父div区域，都触发不到绑定在隐藏img上的事件，和你预期的「点击父div显示图片」逻辑完全不匹配。
• 额外排查点：如果修复事件绑定后还是不显示，优先检查./lock_1.png的图片路径是否正确，路径错误会导致图片可见但加载失败，看起来和没显示一样。

只需要把点击事件从隐藏的img元素，移动到你实际要点击的父div上即可，CSS和JS逻辑无需修改：

<!-- 把onclick绑定到父div上 -->
<div class="twenty-three" id="twenty-three" onclick="displayLock(4)">
  <div id="question">?</div>
  <img id="sq4" src="./lock_1.png" />
</div>

原有JS和CSS保持不变即可：

img#sq4 {
  visibility: hidden;
}

function displayLock(display_square) {
  if (display_square == 4) {
    document.getElementById("sq4").style.visibility = "visible"
  }
}

如果需要优化交互体验，可以给父div加上手型光标提示可点击：

.twenty-three {
  cursor: pointer;
}

如果要实现点击一次显示后不再重复触发逻辑，可以在JS里加一行移除事件的代码：

function displayLock(display_square) {
  if (display_square == 4) {
    const img = document.getElementById("sq4")
    img.style.visibility = "visible"
    // 显示后移除父元素点击事件，避免重复触发
    document.getElementById("twenty-three").onclick = null
  }
}

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