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 相关文章推荐
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
jquery操作select大全
Apr 25 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Vue异步加载about组件
Oct 31 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
vue实现购物车选择功能
Jan 10 Javascript
JS代码优化的8点建议
Feb 04 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
超级退弹代码
2008/07/07 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
如何提高数据访问速度
2016/12/26 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
vue router demo详解
2017/10/13 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
Python判断两个对象相等的原理
2017/12/12 Python
python binascii 进制转换实例
2019/06/12 Python
python绘制高斯曲线
2021/02/19 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
高中班长自我鉴定
2013/12/20 职场文书
运动会获奖感言
2014/02/11 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
酒店周年庆活动方案
2014/08/21 职场文书