Javascript更改div悬停上的全局变量

Question

如何更改 div 悬停时的全局 var 值。

当我将鼠标悬停在类 .mehover 或 .mehoverAnother 上时，类“hideplease”将被添加到.mehide 或 .mehideAnother。当 hoverOut 时，删除类 .mehide 或 .mehideAnother 但将类的删除延迟 2 秒，并且如果每次我将鼠标悬停在 .mehover 或 .mehoverAnother 将 timetolive 变量值更改为 0。

请参阅下面的代码:

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 示例在这里 https://jsfiddle.net/pqn01e5h/9/

Answer 1

尝试下面的代码。

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>