元素块其他元素的悬停效果答案

【问题标题】：element blocks hover effect of other elements元素块其他元素的悬停效果
【发布时间】：2022-11-30 03:46:47
【问题描述】：

我有两个元素，一个圆形和一个正方形（2 个不同的 div）。正方形在圆的上面，但是它阻止下方元素的悬停效果（例如，圆圈变为蓝色）。将悬停效果应用于正方形不起作用，因为悬停效果适用于圆形的每个部分。

在真实的例子中（见第二张图片），你可以看到圆圈是划分为倾斜和旋转变换.

我不想使用 JavaScript，只使用 CSS 和 HTML。

我在这个 CodePen 中简化了问题：codepen.io/tuurtie/pen/XWYPWEb。

这是实际结果的图像（红色是阻止圆圈悬停效果的部分）：

我玩过两者的溢出，我试图在广场上打一个洞，但这仍然阻止了悬停。我知道我很接近！

我还为红色方块本身添加了悬停效果，但是悬停效果不起作用（悬停效果适用于圆的每个部分）。

【问题讨论】：

您是否尝试过 pointer-events: none 使正方形对鼠标交互不透明？
请提供一个minimal reproducible example来证明这个问题。您可以使用 Stack Snippets（图标看起来像 <>）来执行此操作。

标签： html css hover

【解决方案1】：

正如@IT goldman 所说，您可以使用pointer-events: none;：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 250px;
  height: 250px;
}

.circle:hover {
  background-color: blue;
}

.square {
  pointer-events: none;
  position: absolute;
  background-color: red;
  width: 50px;
  height: 50px;
}

<p>The hover effect of the black circle doesn't work when you go over the red square.</p>
<div class="parent">
  <div class="circle"></div>
  <div class="square"></div>
</div>

但是，这将禁用您想要应用到正方形的任何指针事件。另一种解决方案可以使用一些 JavaScript：

const circle = document.querySelector(".circle");
const square = document.querySelector(".square");

square.addEventListener("mouseover", (e) => {
  circle.classList.add("circle-on-hover");
})

square.addEventListener("mouseout", (e) => {
  circle.classList.remove("circle-on-hover");
})

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
}

.circle {
  position: absolute;
  background-color: black;
  border-radius: 50%;
  width: 250px;
  height: 250px;
}


/* ? create a class that can be added
to the circle when square is hovered over */

.circle:hover,
.circle-on-hover {
  background-color: blue;
}

.square {
  position: absolute;
  background-color: red;
  width: 50px;
  height: 50px;
}


/* ? demonstrates that the square still
receives pointer events */

.square:hover {
  background: green;
}

<p>The hover effect of the black circle doesn't work when you go over the red square.</p>
<div class="parent">
  <div class="circle"></div>
  <div class="square"></div>
</div>

但是你做过指定您不希望混入任何 JS。我认为没有任何其他仅 CSS 的解决方案可以实现您想要的行为类型。

【讨论】：

【解决方案2】：

问题出在您的标记中。尽管样式显示圆圈内的正方形，但标记在 DOM 中将它们并排放置。

我所做的是将正方形放在圆圈内，并使用 flex box 相应地设置圆圈的样式，将正方形放在中间。

https://codepen.io/gezzasa/pen/xxzabEL

<div class="parent">
  <div class="circle">
    <div class="square"></div>
  </div>
</div>

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  ....
}

【讨论】：