ホバーは、別のdivが表示されます

Question

http://codepen.io/martaklopf/pen/apzbWv?editors=1111

HTML

<div class="boxes"> </div> 

<div class="hoverover"> 
hello 
</div> 

CSS

.boxes { 
background-color: yellow; 
height: 100px; 
width: 200px; 
display: none; 
} 

.hoverover:hover .boxes { 
display: block; 
} 

私はCSSで本当にシンプルな何かをしようとしていますが、私はそれを把握することはできませんでる。私はいくつかのテキストの上にマウスを置いて、別のものをの別の divに表示させたいだけです。私は、ディスプレイを除いて私の考えていることを考えました：ブロックは何とかブロックされているようです。私はインラインで試してみるとどちらもうまくいかない。本当に明白な何かが欠けていますか？前もって感謝します！

Answer 1

これを実現するには、CSSのみを使用して、表示された要素をマウスの後ろにレイアウトし、隣接する（+）セレクタを使用する必要があります。

.boxes { 
 
background-color: yellow; 
 
height: 100px; 
 
width: 200px; 
 
display: none; 
 
} 
 

 
.hoverover:hover + .boxes { 
 
display: block; 
 
}

<div class="hoverover"> 
 
hello 
 
</div> 
 

 
<div class="boxes">boxes</div>