css - CSSは、別の要素からホバーすると要素のコンテンツを変更します

Question

別の要素からホバーしたときに CSSで要素のコンテンツを変更することは可能ですか? たとえば、この div A、B、C、D、E、F があるとします。B にカーソルを合わせると、A にテキストを表示したいとします。C にカーソルを合わせると、別のテキストが A に表示されます。残りも同様です。すべての変更は、div B から F にカーソルを合わせると、A で行われます。

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;
}