时间戳

首页 > 解决方案 > 悬停在子嵌套元素上不应影响父元素

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

问题描述

我的页面的 HTML 是这样的。当我将鼠标悬停在孩子身上时，它也会触发悬停在父母身上。当我悬停孩子时，我只希望孩子悬停有效。我怎样才能做到这一点？更喜欢 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;
}

标签： javascriptjqueryhtmlcss

解决方案

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

长答案：除非被javascript停止，否则事件总是会在dom树中冒泡，但对于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>

推荐阅读