:hover 更改其他元素，但它也从目标触发[重复]

Posted 2023-05-08

【中文标题】:hover 更改其他元素，但它也从目标触发[重复]

【英文标题】：:hover to change other element, but it triggers from the target as well [duplicate]

【发布时间】：2020-04-17 00:55:55

【问题描述】：

我有问题。我已经使用 .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 的这种方法完成的，但我还没有弄清楚如何防止它触发目标。

【问题讨论】：

pointer-events:none?

【参考方案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 (+)，但是您必须明确定义它的大小，并以另一种方式将其放置在触发器旁边（我使用过@ 987654329@身上）：

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>

【讨论】：

谢谢。看来指针事件属性正是我需要的解决方案！