更改悬停状态 jQuery,而不使用悬停函数



我使用 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;
}

最新更新