divでグローバル変数を変更するホバー

Question

divのホバーでグローバル変数の値を変更する方法。

私は 'hidepleaseは' .mehideまたは.mehideAnotherに追加されるクラス.mehoverまたは.mehoverAnother上のクラスをを合わせる。 hoverOutにクラス.mehideまたは.mehideAnotherを除去するが、2Sによってクラスの除去を遅らせ、私は.mehoverに置くか.mehoverAnotherたびは0

にTimeToLiveの変数の値を変更した場合は、以下の私のコードを参照する場合：

を

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 012ここhttps://jsfiddle.net/pqn01e5h/9/

Answer 1

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

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

jsfiddleサンプルは以下のコードを試してみてください。

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>