鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；
css 鼠标移动到按钮图片改变；图片换层；鼠标放上透明度改变直到隐藏；
css 鼠标移动到按钮图片改变：
方法一：
<style>
.pp a
{
width:575px;
height:157px;
background:url(1.jpg);/*图片地址*/
display:block;
}
.pp a:hover
{
width:575px;
height:157px;
background:url(2.jpg);/*替换的图片地址*/
display:block;
}
</style>
</head>
<body>
<div class="pp"><a href="#"></a></div>
</body>
方法二：
link:平时的状态
visited:被访问过之后
hover:鼠标放上时
active:被按下时
css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active 一定要按上面的顺序写，不然显示的可能会和你预想的不一样
<style type="text/css">
*{ margin:0; padding:0;}
ul li{ list-style:none;}
.nav{ width:800px; height:40px; margin:150px auto;}
.nav ul li{ float:left; width:200px;}
.nav ul li a:link,a:visited{ display:block; width:190px; height:40px; background:url(1.jpg);} /*链接、点击后*/
.nav ul li a:hover{background:url(2.jpg);} /*鼠标经过*/
.nav ul li a:active{background:url(3.jpg);} /*点击时*/
</style>
<body>
<div class="nav">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</body>
图片换层：
<style>
.div{ width:300px; height:200px; z-index:0; position:absolute; left:10px; border:2px #3300FF solid; color:#FFFFFF; font-size:48px; margin-left:200px;}
</style>
<body>
<div class="div" style="1</div>
<div class="div" style="">2</div>
<div class="div" style="3</div>
<div class="div" style=" 4</div>
</div>
</body>
<script type="text/javascript">
$(function(){
var z=-1;
$("div").click(function()
{
$(this).animate({left:"310px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);
})
});
鼠标放上透明度改变直到隐藏：
<style>
#div_test {
width: 500px;
height: 500px;
position:absolute;
filter:Alpha(Opacity=100)
}
</style>
<body>
<div id="div_test" onmouseover="hid()"></div>
</body>
<script type="text/javascript">
var i = 100;
function $(id) {return document.getElementById(id);}
function chang_display() { i--;
var div = $('div_test');
div.style.filter = "Alpha(Opacity="+i+")";
div.style.opacity = i / 100;
if ( i== "0")
{document.getElementById('div_test').style.display="none";//隐藏
exit
}
}
function hid() {
setInterval(chang_display, 15);
}
</script>
