作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:18:31 阅读 我要评论

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(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s1.jpg);}/*链接、点击后*/ .nav ul li a:hover{background:url(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s2.jpg);}/*鼠标经过*/ .nav ul li a:active{background:url(http://files.jb51.net/file_images/article/201212/picmove_1/wall_s3.jpg);}/*点击时*/ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  推荐阅读

  自己写的兼容ie和ff的在线文本编辑器类似ewebeditor

怎么说呢,刚包完夜吧,应该很累了,但现在仍有力气敲打着这些字符,看来我还没有到此为止啊。 废话少说,最近写了个在线的编辑器,类似ewebeditor那样的,当然没有人家那么强大,但是基本功能都有,而且还是兼容i>>>详细阅读


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

地址:http://www.17bianji.com/kaifa2/JS/22829.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)