div悬停在跨度上时不显示div

Question

我有一个以下代码段，并且我在悬停在跨度上时遇到了问题。等级display的div在悬停跨度时不显示。这是标记：

<span class="get">get</span>
<div class="display"></div>

相应的css：

.get:hover .display {
  display:block;
}

.display {
  height: 100px;
  width:100px;
  background-color: #ccc;
  display: none;
}

Answer 1

使用CSS邻近选择器

.get:hover + .display {
    display:block;
}

http://jsfiddle.net/q6qc6Lat/

Answer 2

您应该阅读CSS选择器及其工作原理。有很多很好的资源，虽然有点干，但我仍然建议仔细阅读the W3 selectors table及其解释。以下是您正在使用的选择器的摘录：

  

E F =＆gt; F元素的E元素后代
  E:hover =＆gt;某些用户操作期间的E元素
  E.warning =＆gt;一个E元素，其类为“warning”

要注意的主要事实是 空间实际上是一个选择器：descendant selector。所以你的选择器：

.get:hover .display

将从从右到左：

• 选择课程为“display”的所有元素......
• ......这是......的后代。
• ...元素为hover ed ...
• ...也有“get”类

您遇到的问题是，div 不是悬停span的后代。有很多方法可以解决这个问题，包括@dowomenfart's suggestion使用adjecent选择器，以及更改DOM嵌套。