css – 是:不(:hover)和:hover以安全的方式隐藏可访问的元素?

前端之家收集整理的这篇文章主要介绍了css – 是:不(:hover)和:hover以安全的方式隐藏可访问的元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有时,某些网页元素只能在悬停。一个例子是stackoverflow的“反馈 – 这个帖子对你有用吗?” – 小部件。由于这些元素对于界面可能是至关重要的,因此这种显示悬停特征应该是逐渐增强的,或者在其他方面,不引人注意和优雅地降级。

通常的方式似乎是使用javascript,例如。隐藏元素并在父元素被悬停时使它们可用。选择的原因可能是:hover不支持所有元素,特别是在旧版浏览器中,从而禁止您将元素隐藏到css2。 (对于js / jQuery示例cf. 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/

你怎么看?任何反对或其他来源?

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

解决方法

你的解决方案看起来不错的CSS3。没有什么我可以想到的改进你的解决方案的现代浏览器,因为opacity属性永远不会应用于不支持它的浏览器。

有没有其他浏览器除了IE6和NN4(和更旧的),不支持:hover on元素而不是。正如你的问题所暗示的,所有支持:not()的浏览器都知道也完全支持:hover。

也就是说,你最终留下IE7和IE8缺失了悬停效果,后者仍然相当普遍。你可能也希望支持IE6,但这里有一个解决方案,我相信将解决这些问题,如果你需要它:

> omit:not(:hover),所以你的第一个选择器变得不那么具体,而不是同样具体到你的第二个选择器:hover,你可以联系到IE7和IE8不支持:not()但支持:悬停在所有视觉元素上:

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

>使用visibility属性而不是opacity属性来接触不支持CSS3的IE7和IE8透明度:

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

请记住,visibility:hidden将使元素对鼠标移动也不可见,但在这种情况下,您将其应用于子元素,因此父对象将保持对鼠标移动可见。
>使用IE6不支持的CSS2 / 3组合器,但IE7和IE8做(child&gt,邻近兄弟,一般兄弟〜)隐藏IE6的两个规则。这边界是“hacky”,但你的情况是一个子组合器>非常适合,所以它可以有机地整合,而不是像着名的html>体滤波器:

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

Updated fiddle

猜你在找的CSS相关文章