2017-02-16 26 views
0

私は、その兄弟要素をホバリングすることによって要素の兄弟を操作しようとします。 HTML構造はちょっとそのようなものであるのに対しcss経由の兄弟のホバーは機能しません - なぜですか?

.sw_2-technik + .sw_2-emotionen{ 
    background:green; 
} 

.sw_2-emotionen:hover ~ .sw_2-technik{ 
    background:orange; 
} 

:私はそのようにそれを行う

<section class="wrapper"> 
<div class="sw_2-technik"></div> 
<div class="sw_2-emotionen"></div> 
</section> 

最初の操作がうまく動作一方で、第二1(.sw_2-emotionen:ホバー〜.sw_2 -technik)は何もしません。私は何が間違っていますか?

ありがとうございます!

+1

あなたがここにクリーンでシンプルな方法ですが、CSSで前の兄弟をターゲットにする場合にのみ、次の兄弟ではなく、以前の – LGSon

+0

をターゲットにすることができます:http://stackoverflow.com/a/36118012/3597276 –

答えて

2

兄弟セレクタは、2番目の要素がページの最初の要素の後に来るときにのみ要素に影響します。

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

〜コンビネータは、2つのセレクタを分離し、それが最初によって先行されている場合にのみ、第二の要素と一致し、両者は共通の親を共有します。

+0

しかし、ドン」私はまさにその状況を持っていますか?両方の兄弟が同じラッパー(共通の親)内にあり、 - 「先行」が何を意味するかは正確にはわかりませんが、2番目の要素は最初の要素の直後に実際に従います。 何か問題がありますか?ありがとう! – Daiaiai

+0

@Daiaiaiは 'sw_2-technik'の前に' sw_2-emotionen'を入れてみます。 –

+0

@ uom-pgregorioしかし、私は、これらの突き合わせのために "+"が特に使用されたと思っています。どうして私は "〜"を使用しなければならないのですか 普通の答えは:私が持っている状況は、JSがなければ実行できません。 – Daiaiai

関連する問題