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>