CSS在不同元素的悬停时更改元素内容

Question

CSS中是否可以在从不同元素中悬停时更改元素的内容？比方说,例如,我有这个div,A,B,C,D,E,F.当我在B中盘旋时,我想在A中显示一些文字.如果我将鼠标悬停在C中,则会在A中显示不同的文字.其余部分也是如此.所有的变化都发生在A中,当时它们在div到B中徘徊.

Answer 1

目前,只有CSS才能实现这一点.您可以调整儿童或即将到来的兄弟姐妹的风格.但是您无法设置先前兄弟元素或父元素的样式.

所以关于你的情况,你可以这样做:

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

/* next sibling only */
div.a:hover + div.b { /* styles for b when hovering a */ }

/* general sibling selector */
div.a:hover ~ div.c { /* styles for c when hovering a */ }
div.b:hover ~ div.c { /* styles for c when hovering b */ }

你不能走另一条路,从b到a的例子.

演示

买前先试试