html - 如何在悬停时正确制作元素 'disappear'？

Question

我试图让 span 元素在悬停时消失。锻炼效果不佳。

代码:(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”中的元素消失？

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

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

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/