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

Posted 2023-03-06

【中文标题】如何使 a:hover 与内容包装器一起使用？

【英文标题】：How to make a:hover work with content wrappers?

【发布时间】：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

【参考方案1】：

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

【讨论】：

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