jquery - 如何使用 jquery 更改元素的悬停伪类

Question

我在一个 div 上有一些元素可以被用户移动。为了使它们的可拖动性显而易见，我一直在使用 hover 伪类。

所以我有

.textbox
{ /*some style*/
}

然后我有一个用于文本框可拖动 Angular 的悬停伪类:

.textbox:hover .ui-resizable-sw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-se {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-nw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-ne {background: rgba(0, 0, 0, 0.5)  !important;}

但是，我现在需要做的是只有在用户点击某个激活按钮(switchOn)后才让CSS 生效。如果我在 CSS 样式表中保留以上几行，那么样式将始终应用，但我希望它们仅在某些时候应用，而在其他时间不应用。

我已经检查过这个并且知道如何去做: Can I do this with the :hover pseudo class?

问题是我不想像这样使用 jquery 来做，因为 jQuery 可能很慢而且用户的 div 上可能有很多元素，我不想事情变得迟钝。除了通过 jquery 动态更改样式之外，是否有任何方法可以将 css 样式附加或分离到对象？

像这样:

function switchOn()
{
     $('.textbox').addStyle('.textbox:hover .ui-resizable-ne, 'background: rgba(0, 0, 0, 0.5)  !important;');

}

Answer 1

解决方案之一是在单击按钮时应用另一个类，然后更改 css defs。

$('#my-button').click(function(){
    $('.textbox').toggleClass('active'); // .addClass('active');
})

然后

.textbox.active:hover .ui-resizable-sw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox.active:hover .ui-resizable-se {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox.active:hover .ui-resizable-nw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox.active:hover .ui-resizable-ne {background: rgba(0, 0, 0, 0.5)  !important;}