:not(:hover) 和 :hover 是隐藏可访问元素的安全方法吗？

Posted 2023-03-06

【中文标题】:not(:hover) 和 :hover 是隐藏可访问元素的安全方法吗？

【英文标题】：Is :not(:hover) and :hover a safe way to hide accessible elements?

【发布时间】：2012-04-01 23:32:44

【问题描述】：

有时让某些页面元素仅在例如悬停。一个例子是 *** 的“反馈 - 这篇文章对你有用吗？” - 小部件。由于这些元素可能对界面至关重要，因此此类悬停时显示功能应该是一种渐进式增强功能，或者换句话说，不显眼并优雅地降级。

通常的方式似乎是使用 javascript，例如隐藏元素并使它们在父元素悬停时可用。该选择的原因可能是 :hover 不支持所有元素，尤其是在旧版浏览器中，因此禁止您首先隐藏元素，直到 css2。 （对于 js/jQuery 示例，请参阅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/

你怎么看？有任何反对意见或其他来源吗？

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

【参考方案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

【讨论】：

非常感谢，非常详细的IE添加。但是，我们可能会重新考虑屏幕阅读器可访问性的不透明度：***.com/questions/9056855/… 和 ***.com/questions/272360/… 在我的情况下，该功能只是界面的糖，主要重点是避免使关键界面元素在任何浏览器中都无法访问。您还有其他消息来源吗？

不是真的 - 如果我发现任何我会添加一些:)