純粋なCSSノンマスター、1つの要素の上にカーソルを置いて他のものを広げる

Question

純粋なCSSを使用する。 SASSなし。私は、ホバー効果（異なる要素がサイズを少し広げること）を可能にするものを書くことが可能であるかどうかは疑問です。

だから基本的に。 1つの要素にカーソルを合わせると、子要素でも親要素でもない別のdiv要素が展開されます。純粋なCSSでこれを行うことができますか？

Answer 1

CSSはまだ親セレクタをサポートしていないので、その範囲外です。子セレクタ（除外）に加えて、隣接する兄弟には2つの兄弟セレクタ+があり、一般的には兄弟には~があります。

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    display: inline-block; 
 
    background: blue; 
 
    vertical-align: top; 
 
    transition: 1s all; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    padding: 20px; 
 
    color: white; 
 
} 
 

 
div#one:hover + div#two { 
 
    width: 200px; 
 
} 
 

 
div#one:hover ~ div#three { 
 
    background: red; 
 
}

<div id="one">Hover me!</div> 
 
<div id="two"></div> 
 
<div id="three"></div>

注：兄弟セレクタがコードのみでの出現順に働きます。したがって、div#two ~ div#oneはでなく、は最初のdivに影響します。