将鼠标悬停在另一个div上显示div

Question

我试图将鼠标悬停在<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>

但是如果我这样做，代码将不再起作用。

Answer 1

尝试使用+来匹配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>

Answer 2

在第二个片段中，.showme7元素不再是.single-fun-fact的子元素，而是立即同级，因此选择器变为

.single-fun-fact:hover + .showme7 {
  display: block;
}

或者，如果您之间可以有其他同级，请使用一般同级组合器

.single-fun-fact:hover ~ .showme7 {
  display: block;
}

Answer 3

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

如果它们之间还有其他孩子，则必须使用更通用的兄弟选择器：

https://developer.mozilla.org/en-US/docs/Web/CSS/General_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="dontshowme"></div>
<div class="dontshowme"></div>
<div class="dontshowme"></div>
<div  class="showme7">
  <h2>If  student has 60-65% above in Intermediate English.</h2>
</div>
<div class="dontshowme"></div>

如果这两个都不适用，我们将需要不同的技术，但是我们应该首先确定HTML结构。

Answer 4

尝试添加+

.single-fun-fact:hover + .showme7 {
  display: block;
}