是:不是(:悬停)和:悬停一种安全的方式来隐藏可访问的元素？

Question

有时,使某些页面元素仅在例如悬停时可见是有帮助的.一个例子是stackoverflow的"反馈 - 这个帖子对你有用吗？" - 小部件.由于这些元素可能对界面至关重要,因此这种悬停式展示功能应该是渐进式增强功能,或者换句话说,不引人注目且优雅地降级.

通常的方法似乎是使用javascript,例如隐藏元素并在父元素悬停时使它们可用.这种选择的原因可能:hover是不支持所有元素,特别是在旧版浏览器中,从而禁止您首先隐藏元素,直到css2.(对于js/jQuery示例cf. jquery显示悬停时的元素)

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

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

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

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

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

Answer 1

你的解决方案看起来不错.我无法想到改进现代浏览器的解决方案,因为该opacity属性永远不会被不支持它的浏览器应用.

除了IE6和NN4(以及更老版本)之外,没有其他浏览器,除了支持:hoveron元素之外没有a.正如您的问题所暗示的那样,所有支持的浏览器:not()都知道也完全支持:hover.

也就是说,你最终让IE7和IE8错过了悬停效应,后者仍然非常普遍.您可能也希望支持IE6,但如果您需要,我认为这是一个解决这些问题的解决方案:

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不支持的CSS2/3组合器,但IE7和IE8(子>,相邻兄弟+,一般兄弟~)隐藏IE6中的两个规则.这与"hacky"接壤,但你的情况是儿童组合器>非常适合的情况,所以它可以有机地集成而不是像着名的html > body过滤器一样被黑客入侵:

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

更新了小提琴