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”类中的项目消失？

我确定我做错了。至少我希望可以做到。一如既往地谢谢！

编辑：当我将鼠标悬停在父元素上时，我希望它消失。该元素是“列表项” 问题已得到妥善处理并找到了解决方案。删除downvote？

Answer 1

问题是你要隐藏的元素一旦被移除就不会有：悬停，让它再次出现等等。

您有几个选择：

您可以将：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/

Answer 2

你想要的方式，实际上是关于可见性：

.list-item-note:hover {
    visibility: hidden;
}

更新： http://jsfiddle.net/digitalextremist/ZKuXh/

好吧，我试图为你解决的第二个问题，例如你使用Chrome，就是你是否使用不透明度或可见性使文本消失...当光标在文本本身上时，而不是文本周围有空格，文字仍然出现。这是一个需要解决的问题。我尝试使用display: inline-cell等等，但无论如何，如果将光标移到单个字符上，则悬停会显示为闪烁。

CONCEDE： opacity:实际上是正确的方法，因为它没有闪烁问题。

如何在悬停时正确地使元素“消失”？

2 个答案: