Question

我正在寻找一种纯CSS 解决方案，以使链接在叠加层下可点击，该叠加层在悬停时会隐藏。

到目前为止，我已经尝试过使覆盖层不透明：悬停时为0，因为覆盖层仍然位于链接上，只是不可见，所以它将不起作用。我也尝试过设置显示：悬停时没有显示会导致闪烁，我假设由于以下事实：当叠加显示设置为无时，它会将其从DOM中删除，因此我实际上不再将鼠标悬停在上面。我尝试过的最接近的方法是更改不透明度和z-index的组合，尽管更改z-index具有将显示设置为0的类似效果，从而产生一些闪烁。

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

不透明度：

select user, eventid,
       (to_seconds(min(case when type = 9 then timestamp end)),
        to_seconds(max(case when type = 3 then timestamp end))
       ) as diff_seconds
from t
group by user, eventid;

.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;
}

不透明度和z-index：

<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 {
  opacity: 0;
  z-index: -1;
}

Answer 1

只需将鼠标悬停在容器上即可：）

.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>

隐藏在悬停选择器上的叠加层下的可点击链接

1 个答案: