javascript - 悬停时显示 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 选择器 (+)。这只会显示 sibling 是否在 DOM 中直接相邻。

相反，使用通用的同级 css 选择器 (~)。可以在此处找到有关此选择器的更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

“areaBox/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>