Question

我的页面的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;
}

Answer 1

简单的答案：您不能阻止将鼠标悬停在父对象上。

长答案：除非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>

Answer 2

这是一个骇人的解决方案，可让您将鼠标悬停在可见的文本上以显示隐藏的文本。技巧是使用伪元素扩展隐藏的文本以捕获悬停事件。

这是一个骇人听闻的解决方案，因为您需要指定一个可能覆盖其他元素的大值（可能还有其他副作用）

.inv {
  opacity:0;
  position:relative;
}
.inv:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:-200px; /*this need to be big to cover the visible text*/
}
.inv:hover {
  opacity:1;
}

<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>

将鼠标悬停在子嵌套元素上不应影响父元素

2 个答案: