对于CSS悬停事件，我可以更改另一个div的样式吗？ [英] On a CSS hover event, can I change another div's styling?

问题描述

可能重复：

当我将鼠标悬停在一个id为a的div或类上时，可以获取div或类的背景颜色与idb改变？

When I hover over a div or class with an id of "a", can I get the background color of a div or class with the id of "b" to change?

推荐答案

是的，你可以这样做，但只有 #b

Yes, you can do that, but only if #b is after #a in the HTML.

#b 紧接 #a 之后： http://jsfiddle.net/u7tYE/

#a:hover + #b {
    background: #ccc
}

<div id="a">Div A</div>
<div id="b">Div B</div>

这是使用相邻同级组合器（ + ）。

$ c> #a 和 #b ，您可以使用：http://jsfiddle.net/u7tYE/1/

If there are other elements between #a and #b, you can use this: http://jsfiddle.net/u7tYE/1/

#a:hover ~ #b {
    background: #ccc
}

<div id="a">Div A</div>
<div>random other elements</div>
<div>random other elements</div>
<div>random other elements</div>
<div id="b">Div B</div>

这是使用 general sibling combinator （〜）。

两者 / code>和〜适用于所有现代浏览器和IE7 +

Both + and ~ work in all modern browsers and IE7+

如果 #b 是 #a 的后代，您只需使用 #a：hover #b 。

If #b is a descendant of #a, you can simply use #a:hover #b.

替代：您可以使用纯CSS通过将第二个元素放在第一个元素之前来实现。第一个div是标记中的第一个，但是位于第二个的右侧或下方。它将工作，好像它是以前的兄弟姐妹。

ALTERNATIVE: You can use pure CSS to do this by positioning the second element before the first. The first div is first in markup, but positioned to the right or below the second. It will work as if it were a previous sibling.

这篇关于对于CSS悬停事件，我可以更改另一个div的样式吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！