displaying one div while hovering another one in html error - css

Question

i have a section in html which is divided into two, in one section i am listing some points and in another i am displaying their corresponding sentance on hover, i did like the following:
.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>
but while hovering on the div, its not displaying the hidden div. please tell me what is wrong with my code. thanks in advance

Answer 1

The issue is because .single-fun-fact and .showme are not siblings, as the ~ operator requires them to be.
For this to work you need to amend your selector to include the sibling .col-md-6 element:
.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>
Update
Given your updated HTML the problem is because you've used .showme1, .showme2, .showmeN classes instead of the same .showme class on all elements. Fix that and it works:
.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>

Answer 2

Try this code
HTML
<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="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>
CSS
.showme { display: none; }
.single-fun-fact:hover + div div.showme { display: block; }