CODEWITHSUNDEEP
htmlsass
user5854440
user5854440

Reputation: 281

sass: effect another element when another div is hovered

This question has been answered in CSS here, but I haven't been able to find an answer to it in sass. I'm trying to effect a div inside of another div whenever the outer div is hovered.

For example:

<div id="a">
   <div id="b">
      <p>Hello!</p>
   </div>
</div>

In sass, I would want to target div b's p tag and change it to a different color whenever div a is hovered over. Is this possible in sass? right now all I have is this:

#a{
   &:hover{
   //code to effect div b
   }
}

All help is appreciated.

Upvotes: 2

Views: 7619

Answers (4)

Nikitos
Nikitos

Reputation: 1

parent_class {
  .child_1 {
    visibility: hidden;
  }

  .child_2 {
    cursor: pointer;
  }

  &:has(.child_2:hover) {
    .child_2 > div {
      background-color: #8B0000;
    }

    .child_1 {
      visibility: visible;
    }
  }
}

Upvotes: 0

Manu Artero
Manu Artero

Reputation: 10253

My 2 cents if someone ends up here for a similar but not exactly the same issue

I was trying to affect the span inside a div when hover applies:

.my-container {

  &:hover {
    color: red; // whatever
      > span {  /* the first span child */
        opacity: 1;
        background-color: blue;
    }
  }

}

Upvotes: 0

user5854440
user5854440

Reputation: 281

Here's what I found worked:

#a{
   //original color
   #b{
      p{
         color: red;
      }
   }

   //after hover
   &:hover{
      #b{
         p{
            color: green;
         }
      }
   }
}

Thank you to @HunterTurner for leading me in the right direction

Upvotes: 4

Hunter Turner
Hunter Turner

Reputation: 6894

You would do something like this:

SASS

#a {
  #b p:hover {
    color: red;
  }
}

CodePen

Upvotes: 1

Related Questions