sass: effect another element when another div is hovered

Question

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.

score 3 · Accepted Answer · answered Jun 17 '16 at 03:50

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

score 1 · Answer 2 · answered Jun 16 '16 at 21:49

1

You would do something like this:

SASS

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

CodePen

answered Jun 16 '16 at 21:49

Hunter Turner

6,804
11
41
56

score 0 · Answer 3 · answered Apr 05 '22 at 09:39

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;
    }
  }

}

sass: effect another element when another div is hovered

3 Answers3