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

Is :not(:hover) and :hover a safe way to hide accessible elements?

提问by Richard Kiefer

Sometimes it appears helpful to make certain page elements only visible on e.g. hovers. An example is stackoverflow's "feedback - Was this post useful to you?"-widget. As those elements might be crucial to the interface, such a show-on-hover-feature should be a progressive enhancement or, in other terms, unobtrusive and degrade gracefully.

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

The usual way appears to be employing javascript, e.g. hiding the elements and making them available when a parent element is hovered. The reason for that choice might be :hoveris not support for all elements especially in legacy browsers, thereby forbidding you to hide elements in the first place up to css2. (for a js/jQuery example cf. jquery showing elements on hover)

通常的方法似乎是使用 javascript，例如隐藏元素并在父元素悬停时使它们可用。这种选择的原因可能:hover是不支持所有元素，尤其是在旧版浏览器中，从而禁止您首先隐藏 css2 之前的元素。（对于 js/jQuery 示例，请参见jquery 在悬停时显示元素）

I wonder if you can achieve such a feature safely* with pure css3, using :not(:hover)and :hover, not affecting older browsers. As far as I can see, the requirement is that every browser supporting :not()must support :hoverfor all elements. According to the following sources, that appears to be the case

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

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

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

Example implementation: http://jsfiddle.net/LGQMJ/

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

What do you think? Any objections or other sources?

你怎么认为？任何反对意见或其他来源？

*by safely I mean the browser should always show all elements as a last resort.

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

采纳答案by BoltClock

Your solution looks alright for CSS3. There isn't anything I can think of to improve your solution for modern browsers as the opacityproperty will never be applied by browsers that don't support it anyway.

您的解决方案对于 CSS3 看起来不错。我想不出任何可以改进现代浏览器解决方案的方法，opacity因为无论如何都不支持它的浏览器永远不会应用该属性。

There is literally no other browser besides IE6 and NN4 (and older) without support for :hoveron elements other than a. As implied in your question, all browsers that support :not()are known to also fully support :hover.

从字面上有除IE6和NN4（及以上），没有其他的浏览器不支持:hover上比其他元素a。正如您的问题所暗示的那样，:not()已知所有支持的浏览器也完全支持:hover.

That said, you end up leaving IE7 and IE8 missing out on the hover effect, the latter of which is still quite prevalent. You're probably looking to support IE6 as well, but here's a solution that I believe will address these concerns, if you need it:

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

1. Omit :not(:hover)altogether so your first selector becomes less specific rather than equally specific to your second selector with :hover, andyou can reach out to IE7 and IE8 which don't support :not()but do support :hoveron all visual elements:

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

2. Use the visibilityproperty instead of the opacityproperty to reach out to IE7 and IE8 which don't support CSS3 opacity:

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

   Keep in mind that visibility: hiddenwill make an element invisible to mouseovers as well, but in this case you're applying it to a child element, so the parent will remain visible to mouseovers.

3. Use CSS2/3 combinators that IE6 doesn't support but IE7 and IE8 do (child >, adjacent sibling +, general sibling ~) to hide both rules from IE6. This borders on "hacky", but your situation is one where the child combinator >fits very well, so it can be integrated organically rather than hacked in like the famous html > bodyfilter:

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

1. 省略:not(:hover)干脆让你的第一选择变得不那么具体，而不是同样具体到你与第二选择:hover，并且可以接触到IE7和IE8不支持:not()，但支持:hover所有的视觉元素：

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

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

   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

更新的小提琴