невозможно удалить класс, добавленный addClass при наведении курсора

Question

У меня есть этот простой jquery, который добавляет класс hide_share через 10 секунд, и он работает без сбоев, но я хочу удалить этот класс, когда пользователь наводит курсор на него.

.hide_share {
    opacity :0.1;
}

эта функция добавляет этот класс hide_share

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

, но когда пользователь наводит курсор, я хочу удалить класс hide_share, чтобы он снова был виден эксперты, но никто не работал

вот моя функция удаления

 $("#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>

может ли кто-нибудь сказать, где я делаю ошибку. Я использовал аналогичный код, и раньше он работал безупречно.

Answer 1

Может быть, вы ищете это:

$("#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 . Вы можете установить событие, когда пользователь покидает клиент в качестве второго параметра.