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?)
Using !important can help you. Example:
.notes:hover{transform: none !important;}
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.