css - CSS change an element content on hover from different element

Question

Is it possible in CSS to change an element's content when hovered from a different element? Let's say for example, I have this divs A, B, C, D, E, F. I want to show some text in A when I hover in B. a different text will appear in A if I hover over in C. and the same goes for the rest. All the changes takes place in A when hovered in divs B to F.

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

演示

先试后买

Answer 2

这可以使用通用的同级选择器~并通过匹配的 div 与每个悬停的 div 一起使用。这适用于所有浏览器的最新版本。http://jsfiddle.net/s8uwu/

HTML

<div id="a">Hello A</div>
<div id="b">Hello B</div>
<div id="c">Hello C</div>
<div id="d">Hello D</div>
<div id="e">Hello E</div>
<div id="text">
    <div class="a">From A</div>
    <div class="b">From B</div>
    <div class="c">From C</div>
    <div class="d">From D</div>
    <div class="e">From E</div>
</div>

CSS

#a:hover~#text .a,
#b:hover~#text .b,
#c:hover~#text .c,
#d:hover~#text .d,
#e:hover~#text .e{
    display: block;
}

#text div{
    display: none;
}

Answer 3

简单来说，CSS（层叠样式表）只是为了方便地应用样式/外观。

因此，它根本不处理网页的内容。

但是，您绝对可以在JavaScript的帮助下做到这一点，如下所示 -

<div id="a" onmouseover="document.getElementById('b').innerHTML='ijkl';">abcd</div>
<div id="b">efgh</div>