CSS 伪类实现的鼠标滑动图片链接
作者:bea
下面的代码用到上面的图片,大家注意保存下。 <!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="Conten
下面的代码用到上面的图片,大家注意保存下。
<!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=gbk" />
<title>CSS伪类实现的鼠标滑动链接</title>
<style>
@charset "utf-8";
/* CSS Document For */
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(http://files./demoimg/200910/nav.gif) left top no-repeat;
}
#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -33px no-repeat;
}
#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(http://files./demoimg/200910/nav.gif) left -66px no-repeat;
}
#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -99px no-repeat;
}
#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(http://files./demoimg/200910/nav.gif) left -132px no-repeat;
}
#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -165px no-repeat;
}
</style>
</head>
<body>
<center>
<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="CodeFans" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
</ul>
</div>
</center>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
<!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=gbk" />
<title>CSS伪类实现的鼠标滑动链接</title>
<style>
@charset "utf-8";
/* CSS Document For */
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(http://files./demoimg/200910/nav.gif) left top no-repeat;
}
#Nav a.Dict:hover,#Nav a.Dict:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -33px no-repeat;
}
#Nav a.MediaPlay:link,#Nav a.MediaPlay:visited {
text-decoration:none;
background:url(http://files./demoimg/200910/nav.gif) left -66px no-repeat;
}
#Nav a.MediaPlay:hover,#Nav a.MediaPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -99px no-repeat;
}
#Nav a.RealPlay:link,#Nav a.RealPlay:visited {
text-decoration:none;
background:url(http://files./demoimg/200910/nav.gif) left -132px no-repeat;
}
#Nav a.RealPlay:hover,#Nav a.RealPlay:active {
text-decoration:none;
font-weight:bold;
background:url(http://files./demoimg/200910/nav.gif) left -165px no-repeat;
}
</style>
</head>
<body>
<center>
<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="CodeFans" href="#">MediaPlay</a></li>
<li><a class="RealPlay" href="#">RealPlay</a></li>
</ul>
</div>
</center>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 11款基于Javascript的文件管理器
- JavaScript 三种不同位置代码的写法
- JavaScript 事件的一些重要说明
- CSS 动态链接提示
- javascript 走马灯效果的链接提示
- Js 打字效果 逐一出现的文字
- javascript写的一个链表实现代码
- JavaScript的变量作用域深入理解
- 理解JavaScript变量作用域更轻松
- 理解 JavaScript 预解析
- 用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
- WEB页子窗口(showModalDialog和showModelessDialog)使用说明
- JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
- javascript window对象属性整理
- [原创]javascript 指定区域内图片等比例缩放实现代码
- Javascript 模式实例 观察者模式
- Jquery 弹出层插件实现代码
- CSS 渐变背景的6个演示代码
- 百度用到的Js日历 大家可以看看