css - 在 html 错误中将另一个 div 悬停时显示一个 div

Question

我在 html 中有一个部分分为两部分，在一个部分中我列出了一些要点，在另一个部分中我在悬停时显示了它们相应的句子，我喜欢以下内容:

.showme {
  display: none;
}

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

<section class="company-groth section overlay-with-img gray-bg">
  <img src="UK STUDY-03.jpg" alt="" class="bg-img">

  <div class="company-groth">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="fun-fact">
            <div style="margin-top: -25%; margin-left: -5%;" class="section-head text-center">
              <h2>Highlights Of Study In UK</h2>
              <div class="section-divider">
                <div class="left wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s"></div>
                <span></span>
                <div class="right wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s"></div>
              </div>
              <p></p>
            </div>
            <div id="hulk" class="single-fun-fact">
              <p class="counte">NO</p>
              <h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">NO</p>
              <h2 style="margin-left: 15%;">BACKLOGS COUNT</h2>
              <div class="showme1">
                <h2>And <b> Career Gap</b> is not an issue.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">SCHOLARSHIP</p>
              <h2 style="margin-left: 5%;">OPPORTUNITIES</h2>
              <div class="showme2">
                <h2>Upto 3000£ for your studies.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">QUICK</p>

              <h2 style="margin-left: 15%;">ADMISSION</h2>
              <div class="showme3">
                <h2>In UK admission decisions are much faster, so we can expect a decision in 2-3 weeks.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">CAN</p>
              <h2 style="margin-left: 15%;">WORK PART TIME</h2>
              <div class="showme4">
                <h2>20 hours per week during academic intakes and 40 hours during vacation.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">THREE</p>

              <h2 style="margin-left: 15%;">YEAR GRADUATION</h2>
              <div class="showme5">
                <h2>Most UK universities recognize the Indian education system of 3year graduation.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">SPOUSE</p>
              <h2 style="margin-left: 15%;">CAN TRAVEL</h2>
              <div class="showme6">
                <h2>Along with the student and can work full time.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
            <div class="single-fun-fact">
              <p class="counte">LOW</p>

              <h2 style="margin-left: 15%;">TUITION FEE</h2>
              <div class="showme7">
                <h2>High quality of education with low tuition fee.</h2>
              </div>
            </div>
            <!-- .single-fun-fact -->
          </div>
        </div>
        <!-- .col -->
        <div class="col-md-6">
          <div class="company-groth-graph-wrap">
            <div class="showme">
              <h2>If student has 60-65% above in Intermediate English.</h2>
            </div>
          </div>
          <!-- .company-groth-graph-wrap -->
        </div>
        <!-- .col -->
      </div>
    </div>
  </div>
</section>

但是当鼠标悬停在 div 上时，它不显示隐藏的 div。请告诉我我的代码有什么问题。提前致谢

Answer 1

问题是因为 .single-fun-fact 和 .showme 不是 sibling ，正如 ~ 运算符要求的那样。

为此，您需要修改您的选择器以包含同级 .col-md-6 元素:

.showme {
  display: none;
}

.single-fun-fact:hover ~ .col-md-6 .showme {
  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="col-md-6">
  <div class="company-groth-graph-wrap">
    <div class="showme">
      <h2>If student has 60-65% above in Intermediate English.</h2>
    </div>
  </div>
</div>

更新

鉴于您更新的 HTML，问题是因为您使用了 .showme1、.showme2、.showmeN 类而不是 相同 .showme 所有元素的类。解决这个问题，它就可以工作了:

.showme {
  display: none;
}

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

<section class="company-groth section overlay-with-img gray-bg">
  <img src="UK STUDY-03.jpg" alt="" class="bg-img">

  <div class="company-groth">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="fun-fact">
            <div style="margin-top: -25%; margin-left: -5%;" class="section-head text-center">
              <h2>Highlights Of Study In UK</h2>
              <div class="section-divider">
                <div class="left wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.2s"></div>
                <span></span>
                <div class="right wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s"></div>
              </div>
              <p></p>
            </div>
            <div id="hulk" class="single-fun-fact">
              <p class="counte">NO</p>
              <h2 style="margin-left: 15%;">IELTS REQUIRED</h2>
            </div>
            <div class="single-fun-fact">
              <p class="counte">NO</p>
              <h2 style="margin-left: 15%;">BACKLOGS COUNT</h2>
              <div class="showme">
                <h2>And <b> Career Gap</b> is not an issue.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">SCHOLARSHIP</p>
              <h2 style="margin-left: 5%;">OPPORTUNITIES</h2>
              <div class="showme">
                <h2>Upto 3000£ for your studies.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">QUICK</p>
              <h2 style="margin-left: 15%;">ADMISSION</h2>
              <div class="showme">
                <h2>In UK admission decisions are much faster, so we can expect a decision in 2-3 weeks.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">CAN</p>
              <h2 style="margin-left: 15%;">WORK PART TIME</h2>
              <div class="showme">
                <h2>20 hours per week during academic intakes and 40 hours during vacation.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">THREE</p>
              <h2 style="margin-left: 15%;">YEAR GRADUATION</h2>
              <div class="showme">
                <h2>Most UK universities recognize the Indian education system of 3year graduation.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">SPOUSE</p>
              <h2 style="margin-left: 15%;">CAN TRAVEL</h2>
              <div class="showme">
                <h2>Along with the student and can work full time.</h2>
              </div>
            </div>
            <div class="single-fun-fact">
              <p class="counte">LOW</p>
              <h2 style="margin-left: 15%;">TUITION FEE</h2>
              <div class="showme">
                <h2>High quality of education with low tuition fee.</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="company-groth-graph-wrap">
            <div class="showme">
              <h2>If student has 60-65% above in Intermediate English.</h2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>