CODEWITHSUNDEEP
javascripthtmljquerycss
sujara
sujara

Reputation: 29

unable to remove class added by addClass on hover

i have this simple jquery which adds hide_share class after 10 seconds and it works flawlessely but i want to remove that class when users hovers over that.

.hide_share {
    opacity :0.1;
}

this function adds that hide_share class 

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

but when users brings cursor i want to remove hide_share class so that it is again visible

seems very simple but wasted my several hours then i searched whole stackoverflow and tried all ideas given by experts but none worked

here is my remove function 

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

when i run same thing in console it works and i can see that class is removed but not directly.

i have tried doing everything even added script tag in head but that also did not work and removed that. i tried child parameter and everythig,

here is 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>

can anyone tell where i am doing mistake. i have used similar code and it used to work flawlessely.

Upvotes: 0

Views: 67

Answers (1)

T&#226;n
T&#226;n

Reputation: 1

Maybe you're looking for this:

$("#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() method supports 2 parameters: handlerIn and handlerOut. You can set event when user leaves the cusor as the second parameter.

Upvotes: 1

Related Questions