純粋なCSSを使用して同じ親の下の他の要素を制御するには？ここ

Question

は、私は、同じ親要素に属しているいくつかのエリアをしようとして
と私はそれらのいずれかを置くと、他人の不透明度が低下する、または何かだcodepen Codepen

からの簡単な例です。そうでなければスタイルの変更。例えば

Iが第二の要素を置くと、同じ親を持つ最初の要素は、background-colorを変更することになります。

私は最初の段落で単語エリアを使用するには、子供が本当にdivである必要はありません、それはliまたはpまたは他の要素であることができることを意味します。
は、この問題を解決するために、その要素のいずれかのタイプである可能性があります。

HTMLは次のようになります。

<!-- html --> 
<div class="parent"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
    <div class="four"></div> 
</div> 

私はこの問題を解決するためにE ~ Fルールを試みたが、私はすでにそれが唯一の親の最初の子である第一divで動作します知っていました。 JavaScriptを除く

、純粋なCSSでこの機能を作るための他の方法はありますか？
THX

Answer 1

あなたが.parentを置くと、同様に推移していないすべての子供（pen）のスタイルを変更します。

.parent { 
    width: 100px; /** limit the width of the parent, so you can't hover it, without hovering one of the children as well **/ 
    margin:10px; 

    &:hover > div:not(:hover) { /** only change the background of divs you don't hover as well **/ 
    background: red; 
    } 

    div{ 
    width:100px; 
    height:100px; 
    border:1px solid black; 
    } 
} 

Answer 2

あなたは二重のホバー状態を適用していることを作成：関連ノートで

.parent:hover div { 
 
    opacity:0.5; 
 
} 
 

 
.parent:hover div:hover { 
 
    opacity:1; 
 
} 
 

 
.parent div { 
 
    border:1px dashed #CCC; 
 
    padding:1em; 
 
    margin:1em; 
 
    background:#666; 
 
    color:#FFF; 
 
}

<div class="parent"> 
 
    <div class="one">One</div> 
 
    <div class="two">Two</div> 
 
    <div class="three">Three</div> 
 
    <div class="four">Four</div> 
 
</div>

Answer 3

、要素を意味し、一般的な後継兄弟は（この1の後に来るため~があるが、必ずしも直後ではない）、CSS3セレクタです。 +は次の兄弟のためのものであり、CSS2.1です。

Adjacent sibling combinatorSelectors Level 3および5.7 Adjacent sibling selectorsからCascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specificationを参照してください。