0

我在 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 样式表中，那么样式将始终应用，但我希望它们仅在某些时候应用，而不是在其他时候应用。

我已经检查过这个并且知道怎么做： 我可以用 :hover 伪类来做这个吗？

问题是我不想像这样使用 jquery 来做这件事，因为 jQuery 可能很慢，并且用户的元素上可能有很多元素div，我不希望事情变得迟缓。除了通过 jquery 动态更改样式，有没有办法将 css 样式附加或分离到对象？

像这样的东西：

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

}
4

1 回答 1

3

一种解决方案可以是在单击按钮时应用另一个类，然后更改 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;}
于 2013-06-17T11:05:37.633 回答