Question

这是我的代码

我把它贴在下面：

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来触发hover的{{1}}事件，这会将其宽度扩展为<div>。但是，在上面的示例中，根本没有效果..

有没有人有这方面的想法？谢谢！

Answer 1

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

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

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

编辑以添加示例：

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

Answer 2

Hover绑定mouseover和mouseout处理程序！我不认为它会触发鼠标悬停事件。如果你想要应用一种风格，你可以通过添加类似下面的类

来实现

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

jQuery的`.hover（）`方法不适用于`：hover` CSS样式？

2 个答案: