css – 是：不(：hover)和：hover以安全的方式隐藏可访问的元素？

有时，某些网页元素只能在悬停。一个例子是stackoverflow的“反馈 – 这个帖子对你有用吗？” – 小部件。由于这些元素对于界面可能是至关重要的，因此这种显示悬停特征应该是逐渐增强的，或者在其他方面，不引人注意和优雅地降级。

通常的方式似乎是使用javascript，例如。隐藏元素并在父元素被悬停时使它们可用。选择的原因可能是：hover不支持所有元素，特别是在旧版浏览器中，从而禁止您将元素隐藏到css2。 (对于js / jQuery示例cf. jquery showing elements on hover)

我不知道你是否可以实现这样的功能安全*与纯CSS3，使用：not(：hover)和：hover，不影响旧的浏览器。就我所见，要求是每个浏览器支持：not()必须支持：hover的所有元素。根据以下来源，似乎是这样

> http://www.quirksmode.org/css/contents.html
> http://kimblim.dk/css-tests/selectors/

示例实现：http://jsfiddle.net/LGQMJ/

你怎么看？任何反对或其他来源？

*安全地，我的意思是浏览器应该总是显示所有的元素作为最后的手段。

解决方法

你的解决方案看起来不错的CSS3。没有什么我可以想到的改进你的解决方案的现代浏览器，因为opacity属性永远不会应用于不支持它的浏览器。

有没有其他浏览器除了IE6和NN4(和更旧的)，不支持：hover on元素而不是。正如你的问题所暗示的，所有支持：not()的浏览器都知道也完全支持：hover。

也就是说，你最终留下IE7和IE8缺失了悬停效果，后者仍然相当普遍。你可能也希望支持IE6，但这里有一个解决方案，我相信将解决这些问题，如果你需要它：

> omit：not(：hover)，所以你的第一个选择器变得不那么具体，而不是同样具体到你的第二个选择器：hover，你可以联系到IE7和IE8不支持：not()但支持：悬停在所有视觉元素上：

div span.question {
    opacity: 0;
}
div:hover span.question {
    opacity: 1;
}

>使用visibility属性而不是opacity属性来接触不支持CSS3的IE7和IE8透明度：

div span.question {
    visibility: hidden;
}
div:hover span.question {
    visibility: visible;
}

请记住，visibility：hidden将使元素对鼠标移动也不可见，但在这种情况下，您将其应用于子元素，因此父对象将保持对鼠标移动可见。
>使用IE6不支持的CSS2 / 3组合器，但IE7和IE8做(child&gt，邻近兄弟，一般兄弟〜)隐藏IE6的两个规则。这边界是“hacky”，但你的情况是一个子组合器>非常适合，所以它可以有机地整合，而不是像着名的html>体滤波器：

div > span.question {
    visibility: hidden;
}
div:hover > span.question {
    visibility: visible;
}

Updated fiddle