如何将CSS代码鼠标经过图片变换？

html-css023

如何将CSS代码鼠标经过图片变换？,第1张

使用jquery的toggle方法进行图片切换：

$(function(){

$("#h1").toggle(function(){

$("#h1").css("background-image","路径('./20110528073501b54e6.jpg')")

},function(){

$("#h1").css("background-image","路径('./2011060708410874041.jpg')")

})

})

<input type="button" value="huan" id="h1" class="hh1" />

CSS

.hh1{

background: url("./2011060708410874041.jpg")

width: 120px

height: 90px

}

不用那么麻烦，活用a标签就可以了

<style type="text/css">

a.home {background:url(鼠标滑过之前的图片地址) no-repeatwidth:100pxheight:20pxdisplay:inline-block_float:left}

a.home:hover {background:url(鼠标滑过的图片地址) no-repeat

</style>

<div>

<a href="http://www.baidu.com" class="home">首页</a>

</div>

这样就可以实现有链接的可以换图的效果