CODEWITHSUNDEEP
sass
dwjohnston
dwjohnston

Reputation: 11850

Reference parent pseudo selector with Sass.

This here is what I want to do in plain CSS. Note that I only want to hover apply to the .parent:hover and not any parent with :hover. 

.container {
  padding: 1em;
  border: solid 1px black; 
 }

.parent {
  position: relative; 
  width: 3em;
  height: 3em; 
  background-color: #4d4;
}

.child {
  position: absolute; 
  right: 0; 
  top: 0;
  height: 1em;
  width: 1em; 
  background-color: red; 
  opacity: 0; 
  transition: opacity 0.5s linear; 
}

.parent:hover .child {
  opacity: 1.0;
}
<div class = "container"> 
    <div class = "parent"> 
      <div class = "child"/> 
    </div>
</div>

Question is how I do this in SCSS?

ie. if my SCSS is looking like: 

.container {
    //... 
}

.parent {
   //... 

   .child {
      //..
      opacity: 0; 
      transition: opacity 0.5s linear; 

      //Hover selector here? 
   }
}

I've been playing around with Sassmeister but I can't get this to work.

Upvotes: 0

Views: 183

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

Your .parent selector:

.parent {
  position: relative; 
  width: 3em;
  height: 3em; 
  background-color: #4d4;

  &:hover {
    .child {
      opacity: 1.0;
    }
  }
}

Upvotes: 2

Related Questions