css - 是:not(:hover) and :hover a safe way to hide accessible elements?

Question

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

通常的方法似乎是使用 javascript，例如隐藏元素并在悬停父元素时使它们可用。该选择的原因可能是 :hover 不支持所有元素，尤其是在旧版浏览器中，因此禁止您首先隐藏元素，直到 css2。 (对于 js/jQuery 示例，请参见 jquery showing elements on hover)

我想知道您是否可以使用 :not(:hover) 和 :hover 使用纯 css3 安全地*实现这样的功能，而不影响旧浏览器。据我所知，要求是每个支持 :not() 的浏览器都必须支持所有元素的 :hover。根据以下消息来源，情况似乎是这样

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

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

你怎么看？有任何异议或其他来源吗？

*我所说的安全是指浏览器应该始终显示所有元素作为最后的手段。

Answer 1

您的解决方案看起来适合 CSS3。我想不出有什么可以改进现代浏览器的解决方案，因为 opacity 属性永远不会被不支持它的浏览器应用。

除了 IE6 和 NN4(及更早版本)之外，几乎没有其他浏览器不支持 :hover 在 a 以外的元素上。正如您的问题所暗示的那样，众所周知，所有支持 :not() 的浏览器也完全支持 :hover。

也就是说，您最终会让 IE7 和 IE8 错过悬停效果，后者仍然很普遍。您可能也希望支持 IE6，但如果您需要，我相信这里有一个解决方案可以解决这些问题:

1. 完全省略 :not(:hover)，这样您的第一个选择器变得不那么具体，而不是与使用 :hover 的第二个选择器同样具体，并且您可以访问不支持 :not() 但在所有视觉元素上都支持 :hover 的 IE7 和 IE8:

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

2. 使用 visibility 属性而不是 opacity 属性来访问不支持 CSS3 opacity 的 IE7 和 IE8 :

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

   请记住，visibility: hidden 也会使元素对鼠标悬停不可见，但在这种情况下，您将它应用于子元素，因此父元素对鼠标悬停仍然可见。

3. 使用 IE6 不支持但 IE7 和 IE8 支持的 CSS2/3 组合器(子 >，相邻兄弟 +，一般兄弟 ~ ) 从 IE6 中隐藏这两个规则。这与“hacky”接壤，但您的情况是子组合器 > 非常适合，因此它可以有机地集成而不是像著名的 html > body 过滤器:

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

Updated fiddle