css - 更新样式表中的另一个对象样式

Question

我想知道是否可以从样式表更新另一个对象的样式，就像这个例子想要在您将鼠标悬停在 a 上时显示 h1:

a:hover { set h1:display:block; }

h1 { display: none; }

这在 CSS 中可能吗？

Answer 1

您可以根据前面元素的某些“状态”(“状态”是属性或其值、元素、类或 id)使用 + 和 ~。此元素必须是父级或父级的前级兄弟(但不是后者的后代)。

    h1 > span ~ a { /* will style a, not h1 */ }

    a:hover + h1 { /* will style h1 if next sibling of an element a being hovered.
                      I prefer to wrap inline elements such as a in a block element such as p for example, so it wouldn't work there,
                      but HTML5 is more permissive with links surrounding block elements and such */ }

也许您最终想要实现的目标可以通过破解 CSS3 :target 来完成，如 http://ie7nomore.com/#CSS3 的演示中所示标记为 :target(显然不会再出现 :hover 了)

不要忘记拥有 same behavior for :focus as for :hover, for non-mouse users (键盘和其他设备)。并添加 :active 因为有些 IE 有问题。