如何使 a:hover 与内容包装器一起使用？答案

【问题标题】：How to make a:hover work with content wrappers?如何使 a:hover 与内容包装器一起使用？
【发布时间】：2022-01-18 09:39:41
【问题描述】：

我在使用内容包装器时遇到了问题，因为它们阻止了我的悬停交互工作。目标是让 class='card' 的 div 在鼠标经过时进行交互。

.card {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  overflow: hidden;
}

.card>div {
  height: 100%;
  width: 100%;
}

.card .foreground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateX(100%);
  background-color: blue;
  transition: .5s ease;
}

.card:hover .foreground {
  transform: translateX(0);
}

<div class='card'>
  <div class='foreground'> </div>
  <div class='background'> </div>
</div>

这里的所有信息： https://codepen.io/kaijinny/pen/poWezRL

【问题讨论】：

标签： html css hover wrapper

【解决方案1】：

由于类为.section-bubble1的元素有一个z-index: -1，它不能用于悬停（因为它在图层“下方”）。你需要重新考虑z-index的顺序。

【讨论】：

谢谢你，奥列格。我一直在看我的 CSS 并错过了它。