我使用 css 为某个元素分配了悬停状态。在特定事件之后,我想使用 jQuery 更改悬停状态。我想更改我在 css 文件中提到的 :hover 类选择器。我知道我可以使用.hover
函数实现,但我不想使用它,因为这不适合我的应用程序。在我的应用程序中,悬停状态的这种更改是一段时间,这意味着在该特定时间之后,我必须取消绑定悬停事件。但是在我的应用程序中,有许多条件模块需要调用此取消绑定事件。许多低效的调用来解绑我不想要的东西。
elem {
width:10px;
}
elem:hover {
width:20px;
}
我想将hover
状态的宽度从说20px to 40px
更改为.我想使用一些简单的东西,比如.css('width','100px')
但是如何在选择器上调用:hover
函数。
据我所知,您只能通过悬停事件影响悬停:
$('#selector').hover(
function() { $(this).css('width','100px'); },
function() { $(this).css('width','10px'); }
});
作为替代方案,您可能希望使用 addClass 和 removeClass 来动态地将 css 类分配给给定的元素,所以基本上当希望您的元素具有悬停的 css 类时,您会这样做:
$('#selector').addClass('hovered');
并且您希望您的元素具有正常的类,您确实这样做:
$('#selector').removeClass('hovered');
这不会真正取代悬停事件,但通过这种方式,您可以随时更改 css 类。
您可以加载另一个覆盖 elem:hover 定义的样式表(或将样式节点附加到 head)和
elem:hover {
width: 100px !important;
}
这里有一个大意如此的问题。
(不过,不断绑定和取消绑定悬停事件听起来很可疑。您可能需要考虑导致您发布此问题的行为本身是否不是问题所在。
您可以使用jQuery添加一个类,该类在css中应用了一个悬停选择器。
例如
elem {
width:10px;
}
elem:hover {
width:20px;
}
elem.jsApplied:hover {
width:40px;
}