时间戳

首页 > 解决方案 > 覆盖下的可点击链接，隐藏在悬停选择器上

css - 覆盖下的可点击链接，隐藏在悬停选择器上

问题描述

我正在寻找一种纯 CSS解决方案，以使在悬停时隐藏的覆盖下的链接可点击。

到目前为止，我已经尝试在悬停时设置覆盖不透明度：0，因为覆盖仍然在链接上方，只是不可见。我还尝试设置 display: none on hover 会导致闪烁，我假设由于当覆盖显示设置为 none 时，它​​会从 DOM 中删除它，所以我实际上不再将鼠标悬停在它上面。我尝试的最接近的方法是更改​​不透明度和 z-index 的组合，尽管更改 z-index 具有将显示设置为 0 的类似效果，从而产生一些闪烁。

这是每种方法的简化版本。

不透明度：

.container {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

.overlay:hover {
  opacity: 0;
}
<div class="container">
  <div class="overlay">
    Hover over me
  </div>
  <div class="content">
    This is my content with a <a href="#">link</a> that I want to click
  </div>
</div>

展示：

.container {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

.overlay:hover {
  display: none;
}
<div class="container">
  <div class="overlay">
    Hover over me
  </div>
  <div class="content">
    This is my content with a <a href="#">link</a> that I want to click
  </div>
</div>

不透明度和 z-index：

.container {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

.overlay:hover {
  opacity: 0;
  z-index: -1;
}
<div class="container">
  <div class="overlay">
    Hover over me
  </div>
  <div class="content">
    This is my content with a <a href="#">link</a> that I want to click
  </div>
</div>

标签： css

解决方案

只需将悬停应用到容器:)

.container {
  position: relative;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

.container:hover .overlay {
  display: none;
}
<div class="container">
  <div class="overlay">
    Hover over me
  </div>
  <div class="content">
    This is my content with a <a href="#">link</a> that I want to click
  </div>
</div>

推荐阅读