CSS鼠标悬停菜单 图片交换技术实现
作者:bea
实际上,这里的图片在正常使用时完全可以用CSS代码来定义。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <ti
实际上,这里的图片在正常使用时完全可以用CSS代码来定义。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用图片交换技术制作CSS鼠标悬停菜单</title>
<style type="text/css">
div#spritemenu {
height: 50px;
width: 400px;
font-size: 9px;
background-image: url(http://files./demoimg/200911/spritemenu.gif);
overflow: hidden;
}
div#spritemenu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
div#spritemenu ul li a {
display: block;
position:relative;
height: 50px;
}
div#spritemenu ul li a:hover {
background-image: url(http://files./demoimg/200911/spritemenu.gif);
}
div#spritemenu ul {
margin: 0px;
padding: 0px;
list-style-type:none;
height: 50px;
}
div#spritemenu span {
display: none;
}
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
</style>
</head>
<body>
<div id="spritemenu">
<ul>
<li class="buttonA"><a href="#"><span>Home</span></a></li>
<li class="buttonB"><a href="#"><span>About</span></a></li>
<li class="buttonC"><a href="#"><span>Contact</span></a></li>
<li class="buttonD"><a href="#"><span>Forum</span></a></li>
<li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
</ul>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>使用图片交换技术制作CSS鼠标悬停菜单</title>
<style type="text/css">
div#spritemenu {
height: 50px;
width: 400px;
font-size: 9px;
background-image: url(http://files./demoimg/200911/spritemenu.gif);
overflow: hidden;
}
div#spritemenu ul li {
display: inline;
margin: 0px;
padding: 0px;
}
div#spritemenu ul li a {
display: block;
position:relative;
height: 50px;
}
div#spritemenu ul li a:hover {
background-image: url(http://files./demoimg/200911/spritemenu.gif);
}
div#spritemenu ul {
margin: 0px;
padding: 0px;
list-style-type:none;
height: 50px;
}
div#spritemenu span {
display: none;
}
div#spritemenu li.buttonA a {top: 0px; left: 0px; width: 80px; background-position: 0px 0px;}
div#spritemenu li.buttonB a {top: -50px; left: 82px; width: 64px; background-position: -82px 0px;}
div#spritemenu li.buttonC a {top: -100px; left: 148px; width: 76px; background-position: -148px 0px;}
div#spritemenu li.buttonD a {top: -150px; left: 226px; width: 70px; background-position: -226px 0px;}
div#spritemenu li.buttonE a {top: -200px; left: 298px; width: 102px; background-position: -298px 0px;}
div#spritemenu li.buttonA a:hover {background-position: 0px -50px;}
div#spritemenu li.buttonB a:hover {background-position: -82px -50px;}
div#spritemenu li.buttonC a:hover {background-position: -148px -50px;}
div#spritemenu li.buttonD a:hover {background-position: -226px -50px;}
div#spritemenu li.buttonE a:hover {background-position: -298px -50px;}
</style>
</head>
<body>
<div id="spritemenu">
<ul>
<li class="buttonA"><a href="#"><span>Home</span></a></li>
<li class="buttonB"><a href="#"><span>About</span></a></li>
<li class="buttonC"><a href="#"><span>Contact</span></a></li>
<li class="buttonD"><a href="#"><span>Forum</span></a></li>
<li class="buttonE"><a href="#"><span>Guestbook</span></a></li>
</ul>
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
- jQuery 加上最后自己的验证
- javascript Math.random()随机数函数
- JavaScript 抽奖效果实现代码 数字跳动版
- jquery (show,fadeOut,Animate)简单效果
- jquery checkbox全选反选效果代码
- jquery animate 动画效果使用说明
- jquery 动态调整textarea高度
- CSS 直方图布局示例
- JavaScript 表格高亮类的应用[高级]
- JavaScript window.setTimeout() 的详细用法
- javascript 限制输入脚本大全
- jquery ajax 检测用户注册时用户名是否存在
- 基于JQuery框架的AJAX实例代码
- Jquery AJAX 框架的使用方法
- JQuery打造PHP的AJAX表单提交实例
- jQuery get和post 方法传值注意事项
- 实用的层滑开js实现代码
- 纯JS图片批量预加载技术代码