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

如题所述

这样就搞定了。。。里面的图片位置你自己放了哟~~~
<img src="#" name="picture" width="330" height="210" border="0" align="middle"
onMouseOver="this.src='#'" onMouseOut="this.src='#'">
温馨提示:内容为网友见解,仅供参考
第1个回答  2018-04-12

使用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;

}

本回答被网友采纳
第2个回答  2013-07-17
只要IE在a标签中才可以用css做这个,代码如下a{
background:url(1.jpg);
}
a:hover { background:url(2.jpg);
}
第3个回答  2013-07-17
<!--html代码--><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>兼容IE6</title>
<link href="css/bt.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a href="#"><span>网页顽主论坛</span></a>
<a href="#"><span>这里有更多的文字仍旧能正常显示</span></a>
<a href="#"><span>经典论坛</span></a>
<a href="#"><span>其他相关设计论坛</span></a>
</body> /*css代码*/a{
background:url(../img/btbg.gif);
display:block;
float:left;
font:14px "宋体";
line-height:30px;
height:30px;
color:#FFF;
text-decoration:none;
margin-left:6px;
}
a span{
background:url(../img/btbg.gif);
display:block;
padding:0px 10px 0px 8px;
border-right:#999999 solid 1px;
}
a:hover span{ background:url(../img/btbg1.gif);
display:block;
padding:0px 10px 0px 8px;
}
</html>
相似回答