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

html-css012

如何将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-repeat

width:100px

height:20px

display:inline-block_float:left}

a.home:hover

{background:url(鼠标滑过的图片地址)

no-repeat

</style>

<div>

<a

href="http://www.baidu.com"

class="home">首页</a>

</div>

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

这样就搞定了。。。里面的图片位置你自己放了哟~~~

<img src="#" name="picture" width="330" height="210" border="0" align="middle"

onMouseOver="this.src='#'" onMouseOut="this.src='#'">