悬停时显示div，不显示时隐藏

Question

当一个盒子悬停在上面时，我基本上想要在我的盒子列表下面显示一些额外的信息。 每个方框都包含一个工作，我需要在每个方框悬停时在方框的下方显示一个简短的工作描述。 到目前为止，这是我的HTML：

<div class="areaBox">
 <div id="area1" class="expertise">Integrated Designers</div>
 <div id="area2" class="expertise">Integrated Designers</div>
 <div id="area3" class="expertise">Digital Account Managers</div>
 <div id="area4" class="expertise">Front End Developers</div>
 <div id="area5" class="expertise">Integrated Designers</div>   
 <div id="area6" class="expertise">Digital Account Managers</div>
 <div id="area7" class="expertise">Front End Developers</div>
 <div id="area8" class="expertise">Integrated Designers</div>
 <div id="area9" class="expertise">Digital Account Managers</div>

 <div id="expertTitle">Integrated Designers-Perfect for those.....etc</div>

</div>

所以，当有人在“area1”上方盘旋时，我需要div“expertTitle”出现在所有方框的下方。 我尝试过以下方法：

.areabox > #expertTitle{
display:none;
font-family:adelle-sans;
font-size:27px;
color:#ffdc33;
}

.areabox > #area1:hover + #expertTitle{
display:block;
}

无济于事。 我在这做错了什么？ 我应该使用JQuery吗？

Answer 1

您正在使用直接兄弟css选择器（ + ）。 这只会显示兄弟姐妹是否在DOM中直接相邻。

相反，使用通用兄弟css选择器（ ~ ）。 有关此选择器的更多信息，请访问： https ： //developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

您还有“classBox / areabox”的HTML类名和css选择器不匹配。

这是一个例子：

 .areaBox > #expertTitle{ display:none; } .areaBox > #area1:hover ~ #expertTitle{ display:block; } 

 <div class="areaBox"> <div id="area1" class="expertise">Integrated Designers</div> <div id="area2" class="expertise">Integrated Designers</div> <div id="area3" class="expertise">Digital Account Managers</div> <div id="area4" class="expertise">Front End Developers</div> <div id="area5" class="expertise">Integrated Designers</div> <div id="area6" class="expertise">Digital Account Managers</div> <div id="area7" class="expertise">Front End Developers</div> <div id="area8" class="expertise">Integrated Designers</div> <div id="area9" class="expertise">Digital Account Managers</div> <div id="expertTitle">Integrated Designers-Perfect for those.....etc</div> </div> 

Answer 2

编辑：我编辑了它。 我添加了一些JavaScript。 希望这有效：

 function changeText(text) { document.getElementById("expertTitle").innerHTML = text; } 

 <div class="areaBox"> <div id="area1" class="expertise" onmouseover="changeText('Integrated Designers - Perfect for those.....etc');">Integrated Designers</div> <div id="area2" class="expertise" onmouseover="changeText('Yet even more integrated Designers');">Integrated Designers</div> <div id="area3" class="expertise" onmouseover="changeText('Digital stuff - Beep Boup');">Digital Account Managers</div> <div id="area4" class="expertise" onmouseover="changeText('Pepole that are at the front');">Front End Developers</div> <div id="area5" class="expertise" onmouseover="changeText('OMG MORE INTERGATED DESIGNERS!!!');">Integrated Designers</div> <div id="area6" class="expertise" onmouseover="changeText('More digital stuff - beppy boopy');">Digital Account Managers</div> <div id="area7" class="expertise" onmouseover="changeText('YET EVEN MORE Pepole that are at the front');">Front End Developers</div> <div id="area8" class="expertise" onmouseover="changeText('AND YET OMG MORE Integrated Designers OMG OMG OMG');">Integrated Designers</div> <div id="area9" class="expertise" onmouseover="changeText('more beep and boopy');">Digital Account Managers</div> <hr> <div id="expertTitle"></div> </div>