:hover 更改其他元素，但它也会从目标触发

Question

我有问题。我用 .trigger:hover .target {} 进行了有针对性的悬停。我的问题是它也从 .target 触发..

.trigger {
  width: 300px;
  height: 300px;
  background: #444;
  position: relative;
}

.target {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  transform: translate3d(100%, 0, 0);
}

.trigger:hover .target {
  border-radius: 50%;
}

<div class="trigger">
  <div class="target"></div>
</div>

示例：https://jsfiddle.net/Ls4ejw60/

如何防止这种情况发生？ .. 我已经看到它是用 .trigger:hover .target {} 的这种方法完成的，但我还没有想出如何防止它触发目标。

Answer 1

您可以在 .target:

上使用 pointer-events: none;

.trigger {
  width: 300px;
  height: 300px;
  background: #444;
  position: relative;
}

.target {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111;
  transform: translate3d(100%, 0, 0);
  pointer-events: none;
}

.trigger:hover .target {
  border-radius: 50%;
}

<div class="trigger">
  <div class="target"></div>
</div>

另一种选择是将其移出 .trigger，并使用 adjacent sibling combinator (+)，但您必须明确定义其大小，并以另一种方式将其放置在触发器旁边（我在 body 上使用了 display: flex;）：

body {
  display: flex;
}

.trigger, .target {
  width: 300px;
  height: 300px;
}

.trigger {
  background: #444;
  position: relative;
}

.target {
  background: #111;
}

.trigger:hover + .target {
  border-radius: 50%;
}

<div class="trigger"></div>
<div class="target"></div>

:hover 更改其他元素，但它也会从目标触发

:hover to change other element, but it triggers from the target as well

html

css

hover