在不使用悬停功能的情况下更改悬停状态jQuery？答案

【问题标题】：Change hover state jQuery without using hover function?在不使用悬停功能的情况下更改悬停状态jQuery？
【发布时间】：2012-06-09 10:53:30
【问题描述】：

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

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

我想改变hover 状态的宽度，比如20px to 40px。我想使用像.css('width','100px') 这样简单的东西，但是如何在:hover 选择器上调用这个函数。

【问题讨论】：

你不能只改变 CSS 中的elem:hover 规则吗？我认为hover() 不会比您应用的任何其他方法效率低。
为什么你不使用CSS来实现这个目标？
@David，我并不是说hover() 在直接意义上是低效的。实际上，在我的应用程序中，我必须对 hover,focus,active 做同样的事情。因此，除了多次调用 bind 和 unbind 之外，还有什么方法可以在一两步中简化它。可能是添加或删除class
@Vladimir，我已经动态地改变了它，比如基于页面上当前可用的宽度。
@knoxxs 宽度可以相对于父 div 设置（例如以 % 为单位），或使用 mediaqueries

标签： jquery css events hover

【解决方案1】：

据我所知，您只能通过悬停事件影响悬停：

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

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

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

然后你希望你的元素有正常的类：

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

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

【讨论】：

你能举例说明添加类或删除类来改变悬停状态吗？
我已经编辑了我的答案，添加或删除 css 类不依赖于悬停状态，您可以随时使用它们。
这是将类添加到选择器而不是悬停状态。我在hovered 类中提到的任何 css 也会影响非悬停状态，实际上是所有状态。
确实可以这样工作，但是，您添加或删除的每个类仍然可以有自己的悬停状态 (.hovered:hovered)，不是吗？

【解决方案2】：

您可以加载另一个样式表来覆盖 elem:hover 定义（或将样式节点附加到 head）和

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

Here's a question to that effect.

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

【讨论】：

实际上可以。但我希望我们可以使用@mediaqueries 做同样的事情。我可以吗？

【解决方案3】：

您可以使用 jQuery 添加一个类，该类在您的 css 中应用了一个悬停选择器。

例如

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

【讨论】：

以及elem.jsApplied { width:40px; }。我想要的是仅添加类以悬停。表示我只想更改悬停宽度。