将鼠标悬停在另一个div上显示div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将鼠标悬停在另一个div上显示div相关的知识，希望对你有一定的参考价值。
我试图将鼠标悬停在<div>上时会显示另一个<div>。我有以下代码：
.showme7 {
display: none;
}
.single-fun-fact:hover .showme7 {
display: block;
}<div id="hulk" class="single-fun-fact">
<p class="counte">NO</p>
<h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
<div class="showme7">
<h2>If student has 60-65% above in Intermediate English.</h2>
</div>
</div>[当我那样做时，它工作正常。但我希望<div>位于第一个<div>之外，如下所示：
<div id="hulk" class="single-fun-fact">
<p class="counte">NO</p>
<h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
</div>
<div class="showme7">
<h2>If student has 60-65% above in Intermediate English.</h2>
</div>但是如果我这样做，代码将不再起作用。
答案
尝试使用+来匹配adjacent元素。
.single-fun-fact:hover + .showme7
.showme7 {
display: none;
}
.single-fun-fact:hover + .showme7 {
display: block;
}<div id="hulk" class="single-fun-fact">
<p class="counte">NO</p>
<h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
</div>
<div class="showme7"><h2>If student has 60-65% above in Intermediate English.</h2></div>另一答案
在第二个片段中，.showme7元素不再是.single-fun-fact的子元素，而是立即同级，因此选择器变为
.single-fun-fact:hover + .showme7 {
display: block;
}
或者，如果您之间可以有其他同级，请使用一般同级组合器
.single-fun-fact:hover ~ .showme7 {
display: block;
}
另一答案
如果showme7 <div>在.single-fun-fact之后，则可以使用相邻的同级CSS选择器。https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
.showme7 {
display: none;
}
.single-fun-fact:hover + .showme7 {
display: block;
}<div id="hulk" class="single-fun-fact">
<p class="counte">NO</p>
<h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
</div>
<div class="showme7">
<h2>If student has 60-65% above in Intermediate English.</h2>
</div>另一答案
尝试添加+
.single-fun-fact:hover + .showme7 {
display: block;
}
以上是关于将鼠标悬停在另一个div上显示div的主要内容，如果未能解决你的问题，请参考以下文章