An issue in HTML where only one div is displayed at a time when hovering over another div

I have a section in HTML that is divided into two parts. In one section, I am listing some points and in the other, I am displaying their corresponding sentence on hover. Here is how I implemented it:

.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>
        </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>
          <!-- .company-groth-graph-wrap -->
        </div>
        <!-- .col -->
      </div>
    </div>
  </div>
</section>

However, when hovering over the div element, the hidden div is not being displayed. Can someone please help me identify what might be wrong with my code? Thank you in advance.

css

Answer №1

The issue arises from the fact that .single-fun-fact and .showme are not siblings, which is necessary for the ~ operator to work.

To fix this, you need to adjust your selector to include the sibling element .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>

Update

The problem with your updated HTML is due to using classes like .showme1, .showme2, .showmeN instead of consistently using the same .showme class on all elements. Make this correction to resolve the issue:

.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">
            ... (remaining content omitted for brevity) ...
          </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

Give this code a shot

HTML Snippet

<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 Styles

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is causing my mobile version not to resize and adjust to fit the screen properly?

Currently utilizing Bootstrap 4 along with the viewport meta tag, %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/ Even after hiding all images with .hidden-xs-up, the display on Chrome mobile appear ...

csstwitter-bootstrapresponsive-design

What is the best way to format the JQGrid table for better

Is there a way to indent the table in this example and create white space on the side of the rows and header? I want a white margin on the left of everything below "Stackoverflow example". I'm hoping to achieve this using only CSS. Below is the code ...

cssjqgrid

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

htmlcss

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

Style the image within the table by setting a specific width

My table contains a mix of images and text, with the images set to a specific width using the code snippet below: <img src="" width="250"> When certain large images are dynamically added to the table during runtime using jQuery, the table's wi ...

htmlcss

Using Flexbox for laying out content in both columns and rows

Hey there, I'm looking for a little help. It's been quite some time since I last built a website from scratch and I want to keep things simple this time around. I've used breakpoints before, but I'm curious if Flexbox could be a better ...

htmlcssflexboxmultiple-columns

Resetting the width of a CSS-styled div to its default maximum width

I have a set of automatically generated div containers that contain label and data information. For example: <div class="display-label"> @Html.DisplayNameFor(model => model.BusinessPhone) </div> <div class="display-field"> @H ...

htmlcss

Expanding the background further than the parent's width using HTML and CSS

I am looking to extend the background color or image to mimic the appearance of the example at the bottom in this jsfiddle Same code but showcased here: Example1: <div class="fixed_width"> <div class="header">Header</div> <div ...

htmlcssbackground

Create dynamic CSS pseudo content for before/after in Angularjs automatically

I have a question regarding applying pseudo elements dynamically using Angular. I have a div element where I need to push data to the content attribute in CSS dynamically from my scope. How can I achieve this with Angular? Here is a sample CSS: .bar:befo ...

jquerycssangularjs

Issues with using a personalized font in a Stenciljs project

Looking for guidance on implementing a custom font in my Stenciljs app. I have the otf file, unsure if an npm package is necessary. Here's my code: filestructure: -src --components --assets ---Anurti-Regular.tiff ---Anurti-Regular.ttf friends-l ...

javascriptcsstypescriptnpmstenciljs

Organizing component order based on screen size with React and TailwindCSS

Utilizing React alongside Tailwind CSS, I am looking to dynamically render and reorder components based on screen size. For example, displaying the following order on mobile: <div1 /> <div2 /> <div3 /> And on desktop: <div3 /> < ...

cssreactjstypescriptreact-hookstailwind-css

Altering the style of the underline for a hyperlink

I'm looking to customize the underline style when hovering over a link. Specifically, I want to change the color and size of the underlined link. const useStyles = makeStyles(theme => ({ button: { marginLeft: theme.spacing(2), }, }) ...

cssmaterial-ui

Wave Filter in SVG

While attempting to create a fisheye-esque filter in my SVG, I came across this interesting codepen example: http://codepen.io/johanberonius/pen/RopjYW The effect works well, but I would like it to be a bit more pronounced. Unfortunately, I am unable to m ...

javascriptcsssvgfiltermapping

Locate the XPath for text that is within a div tag and adjacent to a span tag

I've searched, but couldn't find an exact match, so my question is about a low HTML code: <div class="column1"> <div> <div class="name"> Dynamic Name <span class="id" title="ID">Dynamic ID</span> </div> </d ...

htmlcssxpathselenium-webdriverdomxpath

Show the time with AM/PM without displaying the year, month, or day

Currently, I am struggling to show the time as AM when my website loads using the format mm-dd-yyyy --:-- AM in a datetime-local input. The value attribute of datetime-local is causing some confusion for me. ...

javascripthtmlcss

Position a div element after another using the :after pseudo-element

My goal is simple to explain, but I have exhausted all my efforts trying to achieve it. I am hoping for the ★ symbol to appear immediately after the number 06 using jQuery. Any assistance would be greatly appreciated. The numbers are generated by a s ...

javascriptjqueryhtmlcss

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

javascriptjquerycss

What are the strategies employed by Wix in utilizing mobile and desktop CSS?

While browsing through Wix, I stumbled upon something quite intriguing that left me puzzled. On a desktop with a width of 2560px, the Wix page loaded normally. But what caught my attention was when I resized the screen to make it smaller, either by using ...

htmlcssvelo

Unable to change the alignment to the left in the CSS styling

My table has th elements with a text-align: left property. I tried to override this with text-align: center in my CSS, but it's not working. Can anyone suggest a reason why? Here is my table: <table class="days_table" align="center"> <thea ...

htmlcsshtml-tablealignment