Question

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

所以我有

.textbox
{ /*some style*/
}

然后我有一个用于文本框可拖动角落的悬停伪类：

.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;}

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

1 个答案: