gpt4 book ai didi

javascript - 悬停时显示 div,不悬停时隐藏

转载 作者:行者123 更新时间:2023-11-30 12:26:21 25 4
gpt4 key购买 nike

当一个框悬停在上面时,我基本上想在我拥有的框列表下方显示一些额外信息。每个框都包含一个职位,当每个框悬停时,我需要在该行框下方显示一个简短的职位描述。到目前为止,这是我的 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 吗?

最佳答案

您正在使用直接同级 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>

关于javascript - 悬停时显示 div,不悬停时隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29242995/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com