Javascript更改div div全局變量Hover

Question

如何更改div div懸停時的全局var值。

當我懸停在.mehover或.mehoverAnother類 'hideplease' 將被添加到.mehide或.mehideAnother類。當在hoverOut刪除類.mehide或.mehideAnother而是由2S並且如果每個我懸停在.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() { 
 
    \t \t \t 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>