首页 > web前端 > html教程 > CSS实现鼠标移动图片实现切换功能_html/css_WEB-ITnose

CSS实现鼠标移动图片实现切换功能_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:36:57
原创
1100 人浏览过

CSS实现鼠标移动图片实现切换功能:
当鼠标放在一个图片上的时候可以切换为其他图片,使用javascript可以实现,下面介绍一下如何使用CSS实现此功能。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>CSS实现的图片切换效果-蚂蚁部落</title><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(images/wall_s1.jpg);}.nav ul li a:hover {  background:url(images/wall_s2.jpg);}.nav ul li a:active {  background:url(images/wall_s3.jpg);}</style></head><body><div class="nav">  <ul>    <li><a href="#"></a></li>    <li><a href="#"></a></li>    <li><a href="#"></a></li>  </ul></div></body></html>
登录后复制

以上代码实现了,当鼠标放在链接上时,能够实现图片的切换功能。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8354

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板