how to write hover in same class in css file for react js

Question

This is a reactjs project, Te amperzand syntax is working fine in Javascript file but not in css.

How to write hover class in css file?

The way you are trying to write is called scss. A preprocessor for css. geeksforgeeks.org/how-to-style-with-sass-scss-in-react — Siddharth Varangaonkar
– Siddharth Varangaonkar, Commented Dec 10, 2021 at 3:48

Siddharth Varangaonkar · Accepted Answer · 2021-12-10 03:51:38Z

1

If you want to write in same class. You should use Sass/Scss.

Save the css file with .scss extension. It is a precprocessor for better syntax.

Refer this sandbox:

https://stackblitz.com/edit/react-uwktzj?file=src%2FApp.js

answered Dec 10, 2021 at 3:51

Siddharth Varangaonkar

4615 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tanishq Vyas · Accepted Answer · 2021-12-10 04:10:45Z

1

You must write it this way

.baseStyle {
 /* base styles goes here*/

}

.baseStyle:hover {
/* hover styles goes here */
}

If you wish to attain what you intend you must use scss.

Then it will be like

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}

Reference

Using Scss in React

edited Dec 10, 2021 at 4:10

answered Dec 10, 2021 at 3:46

Tanishq Vyas

1,7091 gold badge19 silver badges30 bronze badges

5 Comments

Vikas Acharya Over a year ago

It's not working, also my question is how to write that in same class

Tanishq Vyas Over a year ago

You cannot write it using normal css in same place. This is how css works.

Vikas Acharya Over a year ago

Then why it is working in js like this ':hover': { background: '#40a9ff' }

Vikas Acharya Over a year ago

It was working in js fine but not getting how to write the same in css, The formal method you answered is also not working.

Tanishq Vyas Over a year ago

You must understand that css and js have different syntax. You simply cannot expect it to work by copy pasting. Please take a look at the reference provided now.

Collectives™ on Stack Overflow

how to write hover in same class in css file for react js

2 Answers 2

Comments

Reference

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Reference

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related