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标记为：目标的演示（不会出现：显然已经悬停了））

不要忘记拥有same behavior for :focus as for :hover, for non-mouse users（键盘和其他设备）。并添加：active，因为有些IE是错误的。

Answer 2

不幸的是，除非h1是a的孩子，否则不是。您可以使用+兄弟姐妹选择器（演示here）来消除兄弟姐妹，但除此之外，这是不可能的。例如，

/* Show <h1> element inside <a> on hover */
a:hover h1 {
    display: block;
}

/* Show <h1> adjacent to <a> when hovered */
a:hover + h1 {
    display: block;
}

这里唯一的其他选择是JavaScript。如果您已经使用了像jQuery或Mootools这样的框架，这非常简单，但是使用vanilla JavaScript也非常简单。

Answer 3

如果您将h1放入a，那么您可以使用此样式：

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

如果h1正好在a之后，那么你可以使用它：

h1 {display:none}
a:hover + h1 {display:block;}

否则，您必须使用Javascript。

更新样式表中的其他对象样式

3 个答案: