CSS伪类制作鼠标滑动特效

麻辣堂\|资源主站\|开发论坛\|在线手册

首页 │ Apache │ Linux│ Java│ MySQL│ 注册│帮助

您现在的位置：PHP开发资源网 > 麻辣堂 > 详细资料

相关问题

•	每天只知道灌水。不想做事。完了
•	关于sqlserver2000的问题
•	为什么同样的变量(从数据库中读取的),第二次
•	Session 为什么在偶配置的服务器不传递
•	Sql分组查询问题
•	书本上的新闻发布系统
•	CS真人
•	求教一个SQL语句建表错误
•	在SQL Server中，怎样修改已与其他表建好关
•	紧急求救啊~~ 关于printer 的
•	宋mm的车
•	怎么可以判断用户是从那里来的
•	请教关于显示的问题
•	村儿里的兄弟们，给新村民推荐一本书吧！~
•	我想请问一下如何把asp页面生成html页面

订阅该问题

您想在自己的网站上展示PHP大百科全书吗？来获取免费代码吧！

如要投诉或提出意见建议，请到
站务建议投诉吧反馈。

待解决

CSS伪类制作鼠标滑动特效

悬赏分：20 - 2007年08月22日

CSS伪类制作鼠标滑动特效,主要用到的是背景,以及背景位置的运用
效果演示看这里
http://www.dayanmei.com/demo/nav/

该范例中只用到一张背景图片,利用背景图片的位置调动显示

下面是HTML源代码

CODE:

<!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=utf-8" />
<title></title>
<link rel="stylesheet" rev="stylesheet" href="nav.css" type="text/css" media="all" />
</head>

<body>
<div id="Nav">
<ul>
<li><a class="Dict" href="#">词霸</a></li>
<li><a class="MediaPlay" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
<li><a class="MediaPlay" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
</ul>
</div>
</body>
</html>

css源代码

CODE:

@charset "utf-8";
/* CSS Document For SenJiaDi.com*/
/*先定义一些常用的类*/

body {
text-align:center;
font-size:12px;
color:#777777;
font-family:Verdana, Arial, Verdana, sans-serif,"宋体";
background-color:#FFFFFF;
margin:0;
padding:0;
}

#Nav {
margin:0;
float:left;
padding:5px 5px;
text-align:center;
width:280px;
border:1px solid #777777;
}

#Nav ul {
margin:0;
padding:0;
list-style-type:none;
}

#Nav li {
float:left;
margin:0;
width:130px;
height:33px;
margin-left:5px;
padding:0;
}

#Nav a {
display:block;
width:130px;
height:33px;
line-height:33px;
}

#Nav a.Dict:link,#Nav a.Dict:visited {
text-decoration:none;
background:url(nav.gif) left top no-repeat;
}

#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(nav.gif) left -33px no-repeat;
}

#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(nav.gif) left -66px no-repeat;
}

#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(nav.gif) left -99px no-repeat;
}

#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(nav.gif) left -132px no-repeat;
}

#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(nav.gif) left -165px no-repeat;
}

其中我们注意到HTML代码的链接都有一个样式,比如class="Dict"等,在它们的样式定义中
背景图片采用了位置定位的方式
例如伪类MediaPlay的定位是 left,-66px,意思是说left(也可以改为0)从横坐标0,纵坐标-66象素位置开始
background:url(nav.gif) left -66px no-repeat;

并设置鼠标激活时的背景图片位置,达到变化效果

效果不错吧,你也来尝试一下

[ 本帖最后由 psdshow 于 2007-4-20 03:37 PM 编辑 ]

提问者：psdshow 08-22 15:03

答复

sssssssssss

回答者：PHP爱好者 - 瓦岗村民 03-18 21时