jQuery 的`.hover()` 方法不适用于`:hover` CSS 样式？ [复制]答案

【问题标题】：jQuery's `.hover()` method doesn't work for `:hover` CSS style? [duplicate]jQuery 的`.hover()` 方法不适用于`:hover` CSS 样式？ [复制]
【发布时间】：2015-09-02 12:21:48
【问题描述】：

这是我的代码

http://jsfiddle.net/8fsmcc7b/

我把它贴在下面：

setTimeout(function(){$("div").hover()}, 1000)

div {
    background: grey;
    width: 20px;
}

div:hover {
    width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    test
</div>

我想用jQuery来触发<div>的hover事件，它的宽度会扩大到200px..但是，在上面的例子中，完全没有效果..

有人对此有想法吗？谢谢！

【问题讨论】：

.hover 不能那样工作。但是您可以在 CSS 中添加一个有 :hover 的类，并将其应用于悬停时的元素。
看 [stackoverflow.com/questions/10680446/… [1]: stackoverflow.com/questions/10680446/…

标签： javascript jquery html css javascript-events

【解决方案1】：

Hover 绑定 mouseover 和 mouseout 处理程序！我不认为它会触发 mouseover 事件。如果你想应用一种样式，你可以通过添加如下类来实现

 div:hover,div.hoverd {
  width: 200px;
}    
 <script>
setTimeout(function(){
   $("div").addClass('hoverd');
   setTimeout(function(){
   $("div").removeClass('hoverd');
  },1000)
 }, 1000)     
</script>

【讨论】：

应该是评论。

【解决方案2】：

你可以通过这种简单的方式来扩展它。

创建一个宽度为 200px 的 CSS 类（在这里您还可以添加 CSS3 动画）。使用来自 jQuery 或 .mouseenter() / .mouseleave() 的 .hover(handler1, handler2) 函数。悬停函数的第一个处理程序，将用于鼠标进入该元素，只需添加类，第二个元素用于鼠标离开它，因此删除之前添加的类。

第一个提到的，就像之前的两个鼠标事件。

编辑以添加示例：

$(".div_to_expand").hover(function() {
    $(this).addClass("expanded");
}, function() {
    $(this).removeClass("expanded");
});

【讨论】：