CODEWITHSUNDEEP
csscss-selectors
acobster
acobster

Reputation: 1657

::before pseudo-element interfering with child hover state

I am implementing an "open the music player" button that will slide a music player into view. The sliding works fine in my actual project code, but the hover state is giving me problems.

Specific requirements:

  1. The button's opacity is 0.8 by default, and 1 on hover
  2. The button's parent element needs to rotate and swing up above the music player on smaller screens, but the background image needs to stay in the same orientation. To accomplish this, I applied the background styles to the parent's before pseudo-element.
  3. UPDATE: ADDITIONAL REQUIREMENT The button rotates 180deg on click, so the background image (I simulated this using a linear-gradient) can't be coupled to the button itself. :(

If I comment out the :before styles, hover works fine. But when they're present they seem to interfere with the button's hover state, making it flicker and sometimes disappear entirely.

CodePen New CodePen

Thanks!

Upvotes: 0

Views: 241

Answers (1)

Arman Ozak
Arman Ozak

Reputation: 2344

If the main element is a triangle and the pseudo-element is the background, the users may experience a flicker effect. Here is the related part in your code:

&:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: purple;
}

.open-player-btn {
  margin: 15px;
  border-style: solid;
  border-width: 20px 0 20px 34px;
  border-color: transparent transparent transparent orange;
  .hover-opacity;
}

Try changing the element you put the pseudo-element on. Here is the revized code:

.open-player-btn {
  width: 100%;
  height: 100%;
  background: purple;
  .hover-opacity;

  &:before {
    content: "";
    position: absolute;
    display: block;
    margin: 15px;
    border-style: solid;
    border-width: 20px 0 20px 34px;
    border-color: transparent transparent transparent orange;
  }
}

UPDATE:

If I didn't get it wrong, the arrow should face left on open state, but the gradient should stay the same. Changing the degrees on your CodePen as follows seems to do the trick.

&.open {
  .open-player-btn-wrapper {
    transform: rotate(90deg);
  }

  .open-player-btn {
    transform: rotate(-90deg);
    &:before { transform: rotate(180deg); }
  }
}

Upvotes: 1

Related Questions