您的位置:首页 > Web前端 > CSS

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

2018-10-12 14:04 351 查看

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(//files.jb51.net/file_images/article/201212/picmove_1/wall_s1.jpg);}/*链接、点击后*/
.nav ul li a:hover{background:url(//files.jb51.net/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠标经过*/
.nav ul li a:active{background:url(//files.jb51.net/file_images/article/201212/picmove_1/wall_s3.jpg);}/*点击时*/

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: