CODEWITHSUNDEEP
csssass
JGallardo
JGallardo

Reputation: 11373

Nesting SCSS to change color of background of ::after on :hover

Objective

To have an orange tint when hovering over a link.

Dark tint by default.

I understand I might have other conflicts. But am I at least nesting this order correctly?

Background

I had this issue previously to wanting a colored layer over my image. I was able to get the darker layer on there fine. But when hovered over, the dark layer should not be seen, but replaced with an orange tint.

Code

I have this demo on CodePen

HTML

<li>
  <a href="">
    <img src="http://www-tc.pbs.org/prod-media/newshour/photos/2013/07/10/Tesla_circa_1890_slideshow.jpeg">
  </a>
</li>

SCSS

li {
  > a::after {
    background-color: rgba(30,30,30,0.6);

    &:hover {
      background-color: rgba(255,128,0,0.5);
    }
  }
}

Upvotes: 1

Views: 3869

Answers (1)

BoltClock
BoltClock

Reputation: 723628

I understand I might have other conflicts. But am I at least nesting this order correctly?

The nesting appears to be incorrect. In Selectors 3, which is the standard currently implemented by all browsers, a pseudo-class may not appear after a pseudo-element, but you have a :hover rule within an ::after rule, i.e. a pseudo-class within a pseudo-element. If Sass isn't outright refusing to compile your code, then presumably it's compiling it into something like this:

li > a::after:hover {
  background-color: rgba(255,128,0,0.5);
}

This is not valid CSS, so it won't work.

If you're looking to change the tint of the ::after on a:hover, the best you can do is this, since the pseudo-element must appear last but the :hover is where your rules differ:

li {
  > a {
    &::after {
      background-color: rgba(30,30,30,0.6);
    }
    &:hover {
      &::after {
        background-color: rgba(255,128,0,0.5);
      }
    }
  }
}

(optionally, flattening the li > a and &:hover::after portions if you don't need such granular amounts of nesting)

Upvotes: 3

Related Questions