javascript - 悬停在子嵌套元素上不应影响父元素

Question

我的页面的 HTML 是这样的。当我将鼠标悬停在 child 身上时，它也会触发鼠标悬停在 parent 身上。当我悬停 child 时，我只希望 child 悬停有效。我怎样才能做到这一点？更喜欢 CSS 解决方案，但添加 javascript 也可以

<div class="element">
  <span class="inv"> invisible1 </span>
  <span class="col1"> test </span>
  <div class="element"> 
    <span class="inv"> invisible2 </span>
    <span class="col2"> test child </span>
  </div>
</div>

CSS:

.inv{
  opacity: 0;
}
.element:hover > .inv{
  opacity: 100;
}

Answer 1

简单的回答:你不能阻止悬停在父级上工作。

长答案:事件总是在 dom 树上冒泡，除非被 javascript 停止，但对于 CSS，元素仍将悬停在上面。原因很简单，因为子项在父项内部，悬停子项很明显你也在悬停父项。

但是，您可以更改标记以适应您的需要。

.inv {
  opacity: 0;
}

.item:hover>.inv {
  opacity: 100;
}

<div class="element">
  <div class="item">
    <span class="inv"> invisible1 </span>
    <span class="col"> test </span>
  </div>
  <div class="element">
    <div class="item">
      <span class="inv"> invisible2 </span>
      <span class="col"> test child </span>
    </div>
  </div>
</div>