您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在CSS悬停事件上,我可以更改另一个div的样式吗?

在CSS悬停事件上,我可以更改另一个div的样式吗?

是的,您可以执行此操作,但前提#b#a在HTML之后。

如果#b紧随其后#a

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

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

这是使用相邻的同级组合器(+)。

如果#a和之间还有其他元素#b,则可以使用以下元素:

#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>

这是使用通用的同级组合器(~)。

双方+~在所有现代浏览器和IE7 +工作

如果#b是的后代#a,则可以简单地使用#a:hover #b

替代方案:您可以使用纯CSS通过将第二个元素放置在第一个元素之前来执行此操作。第一个div是标记中的第一个,但位于第二个的右侧或下方。它将像以前的兄弟一样工作。

CSS 2022/1/1 18:17:02 有405人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶