jquery简单实现鼠标经过导航条改变背景图


Posted in Javascript onDecember 17, 2013
<!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> 
<style> 
*{ 
margin:0; 
padding:0; 
} 
body{ 
text-align:center; 
background:yellow; 
} 
#container{ 
width:962px; 
height:auto; 
background:url(b3.jpg); 
margin:0px auto; 
} 
#head{ 
height:100px; 
width:100%; 
} 
.head_ul{ 
list-style:none; 
margin-left:200px; 
} 
.head_ul li{ 
float:left; 
width:90px; 
height:50px; 
line-height:40px; 
font-size:20px; 
margin-top:40px; 
background:url(b1.png); 
} 
.head_ul li a{ 
text-decoration:none; 
} #main{ 
width:100%; 
height:1500px; 
} 
#left{ 
width:30%; 
height:100%; 
float:left; 
} 
#right{ 
width:70%; 
height:100%; 
float:left; 
} 
#clear{ 
clear:both; 
} 
#foot{ 
height:100px; 
width:100%; 
} 
</style> 
<script src="jquery-1.7.2.js"></script> 
<script> 
$(function(){ 
$(".head_ul li").hover(function(){ 
$(this).css('background','url(b2.png)'); 
},function(){ 
$(this).css('background','url(b1.png)'); 
} 
); 
}); 
</script> 
</head> 
<body> 
<div id="container"> 
<div id="head"> 
<ul class="head_ul"> 
<li><a href="#">首页</a></li> 
<li><a href="#">首页</a></li> 
<li><a href="#">首页</a></li> 
<li><a href="#">首页</a></li> 
<li><a href="#">首页</a></li> 
<li><a href="#">首页</a></li> 
</ul> 
</div> 
<div id="main"> 
<div id="left"></div> 
<div id="right"></div> 
<div id="clear"></div> 
</div> 
<div id="foot"></div> 
</div 
</body> 
</html>
Javascript 相关文章推荐
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
window.open()实现post传递参数
Mar 12 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
webpack入门必知必会
Jan 16 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
详解package.json版本号规则
Aug 01 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
javascript确认框的三种使用方法
Dec 17 #Javascript
js 剪切板应用clipboardData详细解析
Dec 17 #Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 #Javascript
JavaScript禁止页面操作的示例代码
Dec 17 #Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 #Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 #Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 #Javascript
You might like
关于时间计算的结总
2006/12/06 PHP
PHP读取RSS(Feed)简单实例
2014/06/12 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
gearman的安装启动及python API使用实例
2014/07/08 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python 对象中的数据类型
2017/05/13 Python
python制作小说爬虫实录
2017/08/14 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python语言基本语句用法总结
2019/06/11 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
飞利浦比利时官方网站:Philips比利时
2016/08/24 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
经管应届生求职信
2013/11/17 职场文书
机械电子工程专业推荐信范文
2013/11/20 职场文书
生产部管理制度
2014/01/31 职场文书
财务部总监岗位职责
2014/03/12 职场文书
节能减耗标语
2014/06/21 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书