How to use hover with react-jss

README.md

How to use hover with react-jss

Let's say we have the following style:

const styles = (theme) => ({
  title: {
    color: theme.color,
  },
})

and we want to change the color when the title is hovered.

In plain CSS we can use psudo classes:

.title:hover{
  color: 'red',
}

While in SASS/LESS:

.title{
  &:hover{
    color: 'red',
  }
}

To accomplish this with react-jss, we can use & operator just like in SASS/LESS:

const styles = (theme) => ({
  title: {
    color: theme.color,
    '&:hover': {
      color: theme.hoverColor,
    }
  },
})

There is a working example: https://codesandbox.io/s/kw3wx5ymkv

thanks

Does this example work with :checked?

Thanks

Does this example work with :checked?

If that works with CSS, should work here 👍

And what about sub elements? For example, I have 3 text elements:

    <div class="wrapper">
      <div class="text1">text 1</div>
      <div class="text2">text 2</div>
      <div class="text3">text 3</div>
    </div>

And I want to hover .wrapper, and to have all 3 text blocks changed their color. What should I do?
Also, I use class hashing, so final classes will be like .wrapper-dfg346

i want to ask sir how can I change other classes when one is hovered.
I tried to use '&:hover > + ~ ' but it never worked

i want to ask sir how can I change other classes when one is hovered.
I tried to use '&:hover > + ~ ' but it never worked

prefix the class with a $. For example: "&:hover $someClass"

check this link

thank brother