将鼠标悬停在文本上，会出现单独的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>