Javascript change global variable on div Hover

Question

How to change global var value on div hover.

When I hover on Class .mehover or .mehoverAnother the class 'hideplease' will be added to .mehide or .mehideAnother. When on hoverOut remove the class .mehide or .mehideAnother but delay the removal of a class by 2s and if each time I hover on .mehover or .mehoverAnother change the timetolive variable value to 0.

see my code below:

Javascript

var timetolive = 2000;
$(document).ready(function() {
  $('.meHover').hover(function() {
        //code here to change the timetolive var value 
        //the .mehide or .mehideAnother should hide immediately by changing the timetolive var value to 0
        $('.mehide').addClass('hideplease');
  }, function() {
        setTimeout(function(){ $('.mehide').removeClass('hideplease'); }, timetolive); //delay removal of class
  });

  $('.meHoverAnother').hover(function() {
        //code here to change the timetolive var value 
        //the .mehide or .mehideAnother should hide immediately by changing the timetolive var value to 0
        $('.mehideAnother').addClass('hideplease');
  }, function() {
        setTimeout(function(){ $('.mehideAnother').removeClass('hideplease'); }, timetolive); //delay removal of class
  });
});

HTML

<div class="container">
  <div class="meHover">hoverme</div>
  <div class="meHoverAnother">other hoverme</div>

  <div class="mehide"></div>
  <div class="mehideAnother"></div>
</div>

jsfiddle sample here https://jsfiddle.net/pqn01e5h/9/

Not sure what you want to achieve, but if you want to restart counting to "live", setTimeout returns timer object, which you can pass to clearTimeout function to "cancel" it. — ahwayakchih
– ahwayakchih, Commented May 24, 2016 at 8:55
I just need to clear the timetolive var when I hover on .mehover or .mehoverAnother — Pro Dev
– Pro Dev, Commented May 24, 2016 at 8:56

Shrabanee · Accepted Answer · 2016-05-24 09:01:16Z

Try the below code.

var timetolive = 2000;
$(document).ready(function() {
  $('.meHover').hover(function() {
        timetolive = 0;
        $('.mehide').addClass('hideplease');
  }, function() {
    timetolive = 2000;
        setTimeout(function(){ $('.mehide').removeClass('hideplease'); }, timetolive); //delay removal of class
  });
  
  $('.meHoverAnother').hover(function() {
  			timetolive = 0;
        $('.mehideAnother').addClass('hideplease');
  }, function() {
    timetolive = 2000;
        setTimeout(function(){ $('.mehideAnother').removeClass('hideplease'); }, timetolive); //delay removal of class
  });
});

.container {
  width: 100%;
  height: 100%;
  color: white;
}

.meHover {
  width: 120px;
  height: 40px;
  background: red;
  margin: 20px 0 0 0;
  position: absolute;
}

.meHoverAnother {
  width: 120px;
  height: 40px;
  background: blue;
  margin: 20px 0 0 120px;
  position: absolute;
}
.mehide {
  width: 120px;
  height: 40px;
  background: yellow;
  position: absolute;
  margin: 60px 0 0 0;
}
.mehideAnother {
  width: 120px;
  height: 40px;
  background: orange;
  position: absolute;
  position: absolute;
  margin: 60px 0 0 120px;
}

.hideplease {
  display: none;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="meHover">hoverme</div>
  <div class="meHoverAnother">other hoverme</div>
  
  <div class="mehide"></div>
  <div class="mehideAnother"></div>
</div>

Collectives™ on Stack Overflow

Javascript change global variable on div Hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related