css鼠标悬停时,换图片

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css鼠标悬停时,换图片相关的知识,希望对你有一定的参考价值。

参考技术A

1首先输入代码下方的代码:

<!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=gb2312" /> 


<title>CSS实现鼠标移动到图片,更换图片</title> 

2、然后输入下方的代码:

</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; 

3、然后在输入下方的代码:

background:url(/jscss/demoimg/wall_s1.jpg);/*链接、点击后*/ 


.nav ul li a:hoverbackground:url(/jscss/demoimg/wall_s2.jpg);/*鼠标经过*/ 


.nav ul li a:activebackground: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> 

4、然后这样就完成了。

以上是关于css鼠标悬停时,换图片的主要内容,如果未能解决你的问题,请参考以下文章

css实现当鼠标停留在图片时显示文字 谢谢!

html鼠标悬停左侧缩小图片放大到右边

CSS如何实现鼠标悬停在图片上底部弹出文字内容?

HTML图片鼠标悬停效果设置!

css如何实现鼠标悬停的提示效果

CSS鼠标悬停图片加边框效果,不位移的方法