CSS实现鼠标移动到图片，更换图片

「爱情、让人受尽委屈。」 2022-03-09 03:28 310阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>CSS实现鼠标移动到图片，更换图片</title>  
</head>  
<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(/jscss/demoimg/wall\_s1.jpg);\}/\*链接、点击后\*/  
.nav ul li a:hover\{background:url(/jscss/demoimg/wall\_s2.jpg);\}/\*鼠标经过\*/  
.nav ul li a:active\{background:url(/jscss/demoimg/wall\_s3.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>  
</html>

当鼠标经过图片时，切换成另外一张图片，鼠标移出时换为原图……  
  
Html：-------------------------------------------------------------  
  
[<img border="0" alt="welcome to my blog" src="images/01.jpg" name="b1" οnmοuseοver="mouseOver()" οnmοuseοut="mouseOut()" />][img border_0_ alt_welcome to my blog_ src_images_01.jpg_ name_b1_ _nm_use_ver_mouseOver_ _nm_use_ut_mouseOut_]  
  
  
  
JS：-------------------------------------------------------------  
  
<script type="text/javascript">  
function mouseOver()\{  
document.b1.src="images/02.jpg"  
\}  
function mouseOut()\{  
document.b1.src="images/01.jpg"  
\}  
</script>

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[img border_0_ alt_welcome to my blog_ src_images_01.jpg_ name_b1_ _nm_use_ver_mouseOver_ _nm_use_ut_mouseOut_]: http:/#