【问题标题】：Is :not(:hover) and :hover a safe way to hide accessible elements?:not(:hover) 和 :hover 是隐藏可访问元素的安全方法吗？
【发布时间】：2012-04-01 23:32:44
【问题描述】：
有时让某些页面元素仅在例如悬停。一个例子是 stackoverflow 的“反馈 - 这篇文章对你有用吗？” - 小部件。由于这些元素可能对界面至关重要，因此此类悬停时显示功能应该是一种渐进式增强功能，或者换句话说，不显眼并优雅地降级。
通常的方式似乎是使用 javascript，例如隐藏元素并使它们在父元素悬停时可用。该选择的原因可能是 :hover 不支持所有元素，尤其是在旧版浏览器中，因此禁止您首先隐藏元素，直到 css2。 （对于 js/jQuery 示例，请参阅jquery showing elements on hover）
我想知道您是否可以使用纯 css3 安全地*实现这样的功能，使用 :not(:hover) 和 :hover，而不影响旧版浏览器。据我所知，要求是每个支持:not() 的浏览器都必须支持:hover 的所有元素。根据以下消息来源，情况似乎是这样的
示例实现：http://jsfiddle.net/LGQMJ/
你怎么看？有任何反对意见或其他来源吗？
*安全地我的意思是浏览器应该总是显示所有元素作为最后的手段。
【问题讨论】：
标签：
css
hover
css-selectors
progressive-enhancement
【解决方案1】：
对于 CSS3，您的解决方案看起来不错。对于现代浏览器，我想不出任何改进您的解决方案的方法，因为无论如何不支持它的浏览器都不会应用 opacity 属性。
除了 IE6 和 NN4（以及更早版本）之外，几乎没有其他浏览器不支持 :hover 对 a 以外的元素的支持。正如您的问题所暗示的，所有支持:not() 的浏览器都已知也完全支持:hover。
也就是说，您最终会让 IE7 和 IE8 错过悬停效果，后者仍然相当普遍。您可能也希望支持 IE6，但如果您需要，我相信这里有一个解决方案可以解决这些问题：
-
完全省略:not(:hover)，因此您的第一个选择器变得不那么具体，而不是与:hover 一样具体到您的第二个选择器，并且您可以联系不支持@的IE7和IE8 987654331@，但在所有视觉元素上都支持:hover：
div span.question {
opacity: 0;
}
div:hover span.question {
opacity: 1;
}
-
使用visibility 属性而不是opacity 属性来访问不支持CSS3 的IE7 和IE8 opacity：
div span.question {
visibility: hidden;
}
div:hover span.question {
visibility: visible;
}
请记住，visibility: hidden 也会使元素对鼠标悬停不可见，但在这种情况下，您将其应用于子元素，因此父元素对鼠标悬停仍然可见。
-
使用 IE6 不支持但 IE7 和 IE8 支持的 CSS2/3 组合子（子 >、相邻兄弟 +、一般兄弟 ~）对 IE6 隐藏这两个规则。这接近于“hacky”，但您的情况是子组合器 > 非常适合的情况，因此它可以有机地集成，而不是像著名的 html > body 过滤器那样被入侵：
div > span.question {
visibility: hidden;
}
div:hover > span.question {
visibility: visible;
}
Updated fiddle