表示画像Iは、画像や画像を含むリストを持っている別の画像

Question

上にマウスを移動するとき、私は、リストが表示された最初の画像の上に置くと、私は何をしたいか、私はCSSを使用していることを行うことができ、ありますか？あなたは兄弟セレクタを探している

ul{ 
 
display: none 
 
} 
 

 
.hoveroverme:hover{ 
 
ul{ 
 
display:block 
 
} 
 
}

<img src="http://placehold.it/350x150" class="hoveroverme"> 
 

 
<ul class="list-inline list-unstyled"> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
<li><img src="http://placehold.it/50x50"></li> 
 
</ul>

Answer 1

：ここに私のコードです。このケースでは、隣接兄弟セレクタ（+）、または一般兄弟セレクタ（~）のいずれかを使用することができます。

ul { 
 
    display: none 
 
} 
 

 
.hoveroverme:hover + ul { 
 
    display: block 
 
}

<img src="http://placehold.it/350x150" class="hoveroverme"> 
 

 
<ul class="list-inline list-unstyled"> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
    <li><img src="http://placehold.it/50x50"></li> 
 
</ul>

Answer 2

あなたはここに+または~

ul{ 
display: none 
} 

.hoveroverme:hover ~ ul{ 
display:block 
} 

+を兄弟セレクタを使用する必要があるだけで、すぐに元のセレクタが先行する最初の要素を選択します。前者セレクタによって先行

~セレクタすべての兄弟。