0

I'm trying to show the elements in another div when hovering over a div. This is what I have now, and it's not working. Currently, it just doesn't do anything on hover, it is just non-responsive. Any tips would be greatly appreciated. I am not using any other languages such as JQuery. Thank you!

HTML/React

<div className="parent">
    <div className="show-me">
        <Element />
    </div>
    <div className="hover-me">
        <span>hi</span>
    </div>
</div>

SCSS: 

.parent {
    .hover-me {
        @include icon('help', inherit);
        color: $b500-blue;

        span {
            font-weight: 700;
        }
    }

    .show-me {
        .show-me-body {
            opacity: 0;

        }
     }

     .hover-me:hover ~ .show-me .show-me-body {
         opacity: 1;
     }
}

The below answer works, but I could not get it to work with the element I have inside show-me. enter image description here enter image description here enter image description here

chubbychu
  • 333
  • 2
  • 7
  • 17

1 Answers1

4

Change your HTML as follows, it will work. .hover-me should come before .show-me.

~ Selector: The .hover-me ~ .show-me selector matches occurrences of .show-me that are preceded by .hover-me.

 <div className="parent">
      <div className="hover-me">
           <span>hi</span>
       </div>
       <div className="show-me">
           <Element />
       </div>

  </div>

Working snippet

/*COMPILED CSS*/

.parent .hover-me {
  color: red;
}
.parent .hover-me span {
  font-weight: 700;
}
.parent .show-me .show-me-body {
  opacity: 0;
}
.parent .hover-me:hover ~ .show-me .show-me-body {
  opacity: 1;
}
      <div class="parent">
            
            <div class="hover-me">
                <span>hi</span>
            </div>
        <div class="show-me">
              <div class="show-me-body">Hellow</div>
            </div>
        </div>
Nithya Rajan
  • 4,722
  • 19
  • 30
  • thank you for your answer! The above answer works, but does not work when I replace show-me-body div with the element I have. Above are the attachments of the styles associated to the element I have – chubbychu Mar 04 '19 at 18:26
  • I got it by setting pointer-events to none – chubbychu Mar 04 '19 at 18:46