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

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>