Js imitate hover concrete implementation code

  • 2020-03-30 01:12:15
  • OfStack

 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="description" content="this" /> 
<meta name="keywords" content="this" /> 
<title>this</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<style type="text/css"> 
body{margin:0;padding:0;} 
.hover{float:left;position:relative;margin:0 auto;padding:0; } 
.hv{position:absolute; left:0;top:0;display:none; } 
</style> 
<script type="text/javascript"> 
$(function() { 
$('.hover').hover( 
function (){ 
$('.hv').stop().fadeTo('slow',1); 
},function() { 
$('.hv').stop().fadeTo('slow',0); 
} 
) 
}) 
</script> 
</head> 

<body> 
<div class="hover"> 
<img src="http://img.vip.xunlei.com/img/banner/201303181424386268.jpg" alt="" width='100px' height='100px'> 
<img class="hv" src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" alt="" width='100px' height='100px'> 
</div> 
</body> 
</html> 

Related articles: