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。希望这有效：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: