Question

我已使用css为某个元素指定了悬停状态。在特定事件之后，我想使用jQuery更改悬停状态。我想改变：我在css文件中提到的悬停类选择器。我知道我可以使用.hover函数实现，但我不想使用它，因为这不适合我的应用程序。在我的应用程序中，这种悬停状态的变化是在一定时间内，这意味着在那段时间后我必须取消绑定悬停事件。但在我的应用程序中有许多条件模块，我需要调用此unbind事件。许多低效的调用解除了我不想要的东西。

elem {
  width:10px;
}
elem:hover {
  width:20px;
}

我想改变hover状态的宽度来说20px to 40px。我想使用像.css('width','100px')之类的简单内容，但如何在:hover选择器上调用此函数。

Answer 1

据我所知，您只能使用悬停事件影响悬停：

$('#selector').hover( 
  function() { $(this).css('width','100px'); }, 
  function() { $(this).css('width','10px'); }
});

作为替代方案，您可能希望使用addClass和removeClass来动态地为给定元素分配css类，所以基本上当您希望您的元素具有hops css类时，您可以这样做：

$('#selector').addClass('hovered');

然后你想让你的元素拥有正常的课程：

$('#selector').removeClass('hovered');

这不会真正取代悬停事件，但这样您可以随时更改css类。

Answer 2

您可以加载另一个覆盖elem：hover定义的样式表（或将样式节点追加到头部）和

elem:hover {
    width: 100px !important;
}

Here's a question to that effect.

（不断绑定和取消绑定悬停事件听起来很可疑。您可能想要考虑导致您发布此问题的行为本身不是问题。）

Answer 3

你可以使用jQuery添加一个类，它在你的css中有一个悬停选择器。

<强> e.g。

elem {
  width:10px;
}
elem:hover {
  width:20px;
}
elem.jsApplied:hover {
  width:40px;
}

不使用悬停功能更改悬停状态jQuery？

3 个答案: