CSS :hover don't apply if style is set in JS-CodePudding

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?)

CodePudding user response：

Using !important can help you. Example:

.notes:hover{transform: none !important;}

CodePudding user response：

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.