html - 如何在悬停时正确创建元素 'disappear'？

Question

我试图使跨度元素在悬停时消失。锻炼得不太好。

代码:(CSS)

.list-item-note { 
    font-size:9px;  
    color:#666;
    font-style: italic;
}
.list-item-note:hover {
    display: none;
}

代码:(HTML)

<div class="list-item"><a href="#">Link Here</a>
    <span class="list-item-note">(This disappear on hover)</span>
</div>      

如何使“list-item-note”类中的元素在其父元素悬停时消失？

我确信我做错了。至少我希望能够做到。一如既往的感谢!

编辑:当我将鼠标悬停在父元素上时，我希望它消失。该元素是“list-item” 问题已得到正确措辞并已找到解决方案。删除否决票？

Answer 1

问题在于，你想要隐藏的元素一旦被移除，就不会出现 :hover ，导致它再次出现等等。

您有几个选择:

您可以将 :hover 添加到本身不会被删除的父元素，如下所示:

.list-item:hover .list-item-note {
    display: none;
}

这是 jsfiddle 的示例:http://jsfiddle.net/KA8KU/

或者，您可以使用不透明度技巧:使用不透明度使元素不可见:

.list-item-note:hover {
  opacity: 0;
}

这是一个示例:http://jsfiddle.net/KA8KU/1/