CODEWITHSUNDEEP
csssasshover
Alejandro
Alejandro

Reputation: 2326

SCSS: simple hover issue

This seems fairly simple, but I am not sure what is wrong.

I am trying to toggle the visibility attribute by hovering the div element as so:

<div class="tooltip">
  <span class="tooltip-text">
    Hello world!
  </span>
</div>

with SCSS:

.tooltip{
  position: relative;
  border: 2px solid red;
  width: 20px;
  height: 20px;
  background-color: white;
  text-align: center;
  color: #3f51b5;
  font-size: 16px;
  font-weight: bold;
  padding: 4px;
  .tooltip-text{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 1;
    &:hover {
      visibility: visible;
    }
  }
}

I am assuming nesting is not correct at the moment.

Upvotes: 0

Views: 844

Answers (1)

Michael Coker
Michael Coker

Reputation: 53664

You assigned the :hover CSS to .tooltip-text, which is hidden, so you can't hover it. You need to assign the :hover pseudo class selector to .tooltip and then list the .tooltip-text selector after it to target it's visibility. Like this

.tooltip{
  position: relative;
  border: 2px solid red;
  width: 20px;
  height: 20px;
  background-color: white;
  text-align: center;
  color: #3f51b5;
  font-size: 16px;
  font-weight: bold;
  padding: 4px;
  &:hover .tooltip-text {
    visibility: visible;
  }
  .tooltip-text{
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 1;
  }
}

Upvotes: 2

Related Questions