Question

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

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

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

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

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

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

Answer 1

您的解决方案对于CSS3看起来没问题。我无法想到改进现代浏览器的解决方案，因为opacity属性永远不会被不支持它的浏览器应用。

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

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

完全省略:not(:hover)，因此您的第一个选择器变得不那么具体，而不是具有:hover，和的第二个选择器同样具体，您可以联系到IE7和IE8不支持:not()但在所有可视元素上都支持:hover：
```
div span.question {
    opacity: 0;
}
div:hover span.question {
    opacity: 1;
}
```
使用visibility属性而不是opacity属性来联系不支持CSS3 {IE（1）}的IE7和IE8：
```
opacity
```
请记住，div span.question { visibility: hidden; } div:hover span.question { visibility: visible; }也会使一个元素对鼠标悬停不可见，但在这种情况下，您将它应用于子元素，因此父母将对鼠标悬停保持可见。
< / LI>
使用IE6不支持的CSS2 / 3组合子，但IE7和IE8（小孩visibility: hidden，相邻兄弟>，普通兄弟+）隐藏这两个规则来自IE6。这与“hacky”接壤，但你的情况是儿童组合子~非常适合，所以它可以有机整合而不是像着名的>过滤器一样被黑客入侵：
```
html > body
```

Updated fiddle

是：不是（：悬停）和：悬停一种安全的方式来隐藏可访问的元素？

1 个答案: