如果在 JS 中设置了样式，则 CSS:hover 不适用

Question

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

Answer 1

Using !important can help you. Example:

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

Answer 2

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.