0

first time posting a question so sorry if I make mistakes.

I have the following JS code for creating "notes" with a specified rotation:

newNote.style.transform = rotate(30deg);

it works great but when I try to use this CSS it does not get applied (should reset the rotation):

.notes:hover{transform: none;}

so after some more trying I think it could be a bug as styling never apply on hover if they been applied in the JS (is there any fix for this or should it be reported as a bug?)

Code Pal
  • 68
  • 8
  • 1
    Thats because setting styles via javacript applies `inline` styles (style attribute) whilst your css applies to a class. Inline-styles _always_ overwrite any css class styles. The only exception are `!important`-tagged css styles. See https://stackoverflow.com/questions/38879857/override-inline-style-with-css for more info. – Fabian S. Jan 26 '22 at 11:54

2 Answers2

1

Using !important can help you. Example:

.notes:hover{transform: none !important;}
Oleg Barabanov
  • 2,468
  • 2
  • 8
  • 17
  • 1
    This solves the problem (and is an actual legit usecase for `!important`), but please make sure you are aware of what `!important` does and what are the [implications](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) of using it. – Fabian S. Jan 26 '22 at 11:56
0

Please remove your js code and use these instead:

.notes { transform: rotate(30deg); }
.notes:hover{transform: none;}

The first line adds the rotation always.

If you want to add rotation in specific case, use these styles instead:

.notes.rotate { transform: rotate(30deg); }
.notes:hover{transform: none;}

In your js, add 'rotate' class to the element you need:

newNote.classList.add('rotate');

It will add the rotation.

Alon Shmiel
  • 6,753
  • 23
  • 90
  • 138
  • thanks so much for the help but in the future I would like to have random rotations so it would have to be done in JS but I'll keep this in mind for future uses – Code Pal Jan 26 '22 at 12:12