完全用CSS实现鼠标移动到图片并更换图片

时间:2021-05-18

CSS实现鼠标移动到图片,更换图片,这是一个完全用CSS实现的效果,当然用JavaScript也可以实现,当把鼠标移动到图片的时候,图片自动更换为其它的图片,由此我们可以制作一些效果复杂的按钮,比如换色按钮。
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(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s1.jpg);} .nav ul li a:hover{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s2.jpg);} .nav ul li a:active{background:url(//img.jbzj.com/file_images/article/201212/picmove_1/wall_s3.jpg);}

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章