32

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

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

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

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

你怎么看？有任何反对意见或其他来源吗？

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

4

1 回答 1

22

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

除了 IE6 和 NN4（以及更早版本）之外，几乎没有其他浏览器不:hover支持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 不支持但 IE7 和 IE8 支持的 CSS2/3 组合器（child >、相邻兄弟+、一般兄弟~）对 IE6 隐藏这两个规则。这接近“hacky”，但您的情况是子组合>器非常适合的情况，因此它可以有机地集成，而不是像著名的html > body过滤器那样被入侵：

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

更新的小提琴

于 2012-03-16T12:28:45.060 回答