0

Here is the CSS that I am trying to convert:

    .container {
  some CSS in here - figured that out 
}



.overlay {
  some CSS i can convert - not sure on below line
  transition: .5s ease;
}

This is the CSS I am most struggling with 

.container:hover .overlay {
  height: 100%;
}

Here is my JSS - that is NOT working when it comes to the hover effect:

  container: {
    position: 'relative',
    width: '100%',
    '&:hover, &:overlay': {
      height: '100%',
      border: 'solid red'
    }
  },
  overlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#008CBA',
    overflow: 'hidden',
    width: '100%',
    height: 0,
    transition: ['.5s', 'ease']
  },

I cannot figure out how to convert the .container:hover .overlay portion? I search on the JSS playground site and was unable to get anywhere. I was thinking it was simply a nested problem, but it may be something more obvious. Just staring at the same problem for too long.

Montucky Mike
  • 1
  • Inline styles cannot be used to target pseudo-classes or pseudo-elements. You need to use a stylesheet. See here: https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react – StudioTime Nov 29 '17 at 18:28
  • 1
    Possible duplicate of [CSS pseudo elements in React](https://stackoverflow.com/questions/28269669/css-pseudo-elements-in-react) – StudioTime Nov 29 '17 at 18:29

1 Answers1

1

You want '&:hover $overlay'

Oleg Isonen
  • 1,463
  • 10
  • 10