当鼠标移开链接图层消失的特效-JS特效-爱易网页

当鼠标移开链接图层消失的特效

日期：2014-05-18　浏览次数：20149 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ddd</title>
<style type="text/css">
.a_b{ width:80px; height:30px; background:#ccc; text-align:center; line-height:30px; border:1px solid #333; color:#000; font-size:18px;}
#account_inner{ width:200px; height:100px; background:#8F89B1; color:#333; padding:10px; text-align:center; font-size:25px; font-family:Arial, Helvetica, sans-serif;}
 .subhover{ background:#36F; color:#fff;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
function downMenu(m,n,j,k){
    $(m).mouseover(function() {  
        $(n).slideDown(j).show();  
  
        $(this).parent().hover(function() {   
        }, function(){   
            $(n).slideUp(j);   
        });   
  
      
        }).hover(function() {   
            $(this).addClass(k);   
        }, function(){ 
            $(this).removeClass(k); 
    });   
 
 };
downMenu("#a_b","#account_inner","fast","subhover") 
  
});  
</script>
</head>
<body>
<div id="a_b" class="a_b">a</div>
<div id="account_inner" style="display:none;">b</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]