时间戳

首页 > 解决方案 > 悬停时无法删除 addClass 添加的类

javascript - 悬停时无法删除 addClass 添加的类

问题描述

我有这个简单的 jquery，它在 10 秒后添加了 hide_share 类，它可以完美地工作，但是当用户将鼠标悬停在该类上时，我想删除该类。

.hide_share {
    opacity :0.1;
}

这个函数添加了 hide_share 类

    setTimeout(function() {$("#main_id").addClass("hide_share");}, 10000);

但是当用户带来光标时，我想删除 hide_share 类，以便它再次可见

看起来很简单但浪费了我几个小时然后我搜索了整个stackoverflow并尝试了专家给出的所有想法但没有一个奏效

这是我的删除功能

 $("#main_id").hover(function () {$(this).removeClass("hide_share");} );

当我在控制台中运行相同的东西时，它可以工作，我可以看到该类被删除但不是直接删除。

我已经尝试过做所有事情，甚至在头中添加了脚本标签，但这也不起作用并删除了它。我尝试了子参数和一切，

这是html

<div id="main_id" class="button-position-left hide_share"><div class="button-label"><span>Share</span></div><div class="button2">Img_here</div></div>

谁能告诉我在哪里做错了。我使用过类似的代码，它曾经完美地工作过。

标签： javascripthtmljquerycss

解决方案

也许你正在寻找这个：

$("#main_id").hover(function () {
  $(this).removeClass("hide_share");
}, function () {
  $(this).addClass("hide_share"); 
});

setTimeout(function() {$("#main_id").addClass("hide_share");}, 10000);
.hide_share {
    opacity :0.1;
}

#main_id {
  width: 100px;
  height: 100px;
  background-color: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main_id" class="button-position-left"></div>

.hover()方法支持 2 个参数：handlerIn和handlerOut。您可以将用户离开光标时的事​​件设置为第二个参数。

推荐阅读