0

我有一个 CSS3 规则，我想隐藏给定元素内的所有内容，除了任何标题，直到用户将鼠标悬停在它上面。哪种方式会是更好的选择？请记住，在这种情况下，我并不担心与 CSS2.1 的向后兼容性

理念一

SECTION FIGURE.collapsed:not(:hover) *:not(H1):not(H2):not(H3):not(H4):not(H5):not(H6){
    display:none;
}

Pro：在一个选择器中完成所有操作

缺点：看起来不稳定，我觉得有点模棱两可

想法 2

SECTION FIGURE.collapsed *{
    display:none;
}
SECTION FIGURE.collapsed:hover *{
    display:initial;
}


SECTION FIGURE.collapsed H1,
SECTION FIGURE.collapsed H2,
SECTION FIGURE.collapsed H3,
SECTION FIGURE.collapsed H4,
SECTION FIGURE.collapsed H5,
SECTION FIGURE.collapsed H6{
    display:block;
}

优点：经典的 CSS，更容易理解

缺点：覆盖以前设置的样式；似乎不是display:initial;有效的 CSS，尽管它有效。

4

2 回答 2

1

最好的方法是将非标题内容封装在某种形式的容器中。根据您的情况，可能是 div 或 HTML5 语义容器。将一个类应用于这些内容容器，然后使用一个简短的单一查询来隐藏此内容。由于隐藏容器会自动隐藏其内容，因此您有一个简短、简单且最重要的是易于理解的解决方案，只需很少的额外标记。

我最初应该提到，这样做确实偏离了您最初严格使用 CSS 的愿望。在这里，您使用 JavaScript 来处理事件，并使用 CSS 来管理信息的显示和隐藏。我发现这比让标题的 CSS 决定内容的样式更清晰，但这只是我。

无论如何，一个非常简单的实现如下。如果你实现了这个，你会想要重构以使其更健壮（使用第二个孩子不是很耐重构），但你明白了。

<div id="wrapper">
    <h1>Content</h1>
    <div style="display: none">
        This is some hidden content
    </div>
</div>

document.getElementById("wrapper").onmouseenter = function () {
    this.children[1].style.display = "block";
};

document.getElementById("wrapper").onmouseleave = function () {
    this.children[1].style.display = "none";
};
于 2013-01-30T19:42:34.107 回答
1

我认为结合你所拥有的将是最好的。您可以display: initial通过执行:not(:hover)但重置所有标题元素来消除 （通常display: block无论如何都会如此。

更新：需要通过添加:not(:hover)到所有来获得选择器的特异性。见小提琴。（注意：h2.1 标签仍然隐藏，因为它位于div[这是 BoltClock 在他的讨论中指出的]）。

SECTION FIGURE.collapsed:not(:hover) * {
    display:none;
} 

SECTION FIGURE.collapsed:not(:hover) H1,
SECTION FIGURE.collapsed:not(:hover) H2,
SECTION FIGURE.collapsed:not(:hover) H3,
SECTION FIGURE.collapsed:not(:hover) H4,
SECTION FIGURE.collapsed:not(:hover) H5,
SECTION FIGURE.collapsed:not(:hover) H6{
    display:block;
}
于 2013-01-30T20:00:25.307 回答