Mouse over the implementation of lazy loading and hidden layer of js code

  • 2020-03-26 21:26:38
  • OfStack

 
<div id="follow"> 
<a href="#" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();" class="btn">+Follow</a> 
<div class="layer_follow" id="layer_follow" onmouseover="showPlusMobile();" onmouseout="hidePlusMobile();"> 
<p> This is the hidden layer </p> 
</div> 
</div> 

CSS:
 
.layer_follow 
{ 
display:none 
} 

Js:
 
var isPlusMobileVisible=false; 
var showTid; 
var hideTid; 
function showPlusMobile(){ 
if(isPlusMobileVisible == false) { 
showTid = setTimeout("document.getElementById('layer_follow').style.display='block'; isPlusMobileVisible=true;", 500); 
}else{ 
clearTimeout(hideTid); 
} 
} 
function hidePlusMobile(){ 
if(isPlusMobileVisible == true) { 
hideTid = setTimeout("document.getElementById('layer_follow').style.display='none'; isPlusMobileVisible=false;", 500); 
}else { 
clearTimeout(showTid); 
} 
} 

Related articles: