如何使用jquery更改元素的悬停伪类
如何使用jquery更改元素的悬停伪类
提问于 2013-06-17 19:02:03
我在div上有一些用户可以移动的元素。为了使它们的可拖放性更明显，我一直使用hover伪类。
所以我有
.textbox
{ /*some style*/
}然后我为textbox的可拖动角创建了一个hover伪类：
.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;');
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-17 19:05:38
其中一个解决方案可以是在单击按钮时应用另一个类，然后更改css定义。
$('#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;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17145947
复制相关文章
相似问题
腾讯云开发者
