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

Question

第一次发帖如有错误请见谅

我有以下 JS 代码用于创建具有指定旋转的“注释”：

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

它很好用，但是当我尝试使用它时 CSS 它没有被应用（应该重置旋转）：

.notes:hover{transform: none;}

因此，经过更多尝试后，我认为这可能是一个错误，因为如果在 JS 中应用样式，则样式永远不会应用于悬停（是否有任何修复或应该将其报告为错误？）

Answer 1

使用!important可以帮到你。示例：

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

Answer 2

请删除您的 js 代码并改用这些代码：

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

第一行总是添加旋转。

如果您想在特定情况下添加旋转，请改用这些样式：

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

在你的js中，将'rotate' class添加到你需要的元素中：

newNote.classList.add('rotate');

它将添加旋转。