Question

我有一个纯CSS解决方案，单击锚点即可在div顶部显示覆盖图像。除单击关闭按钮滚动到页面顶部外，它工作正常，我希望它关闭然后保留在页面的当前位置。我尝试将一个div ID添加到href中，但是覆盖层没有关闭，这只能用CSS完成吗？任何帮助表示感谢，非常感谢。

.popup .close {
  position: absolute;
  top: 70px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover {
  color: #06D85F;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

<div id="popup1" class="overlay">
  <div class="popup">
    <a class="close" href="#">&times;</a>
    <div class="content">
      <img src="./assets/map-overlay.png">
    </div>
  </div>
</div>

Answer 1

过去，我想停止点击链接以滚动到页面顶部，对我来说，我使用了href="#!"，它可以防止滚动到页面顶部< / p>

Answer 2

将href="#"更改为href="#!"

.popup .close {
  position: absolute;
  top: 70px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover {
  color: #06D85F;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
}

<div id="popup1" class="overlay">
  <div class="popup">
  <!-- Change the href="#" by href="#!"-->
    <a class="close" href="#!">&times;</a>
    <div class="content">
      <img src="./assets/map-overlay.png">
    </div>
  </div>
</div>

CSS覆盖关闭按钮滚动到页面顶部

2 个答案: