编程 Javascript

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左侧多级菜单动态的解决方案

Feb 01 Javascript

Safari5中alert的无限循环BUG

Apr 07 Javascript

学习从实践开始之jQuery插件开发对话框插件开发

Apr 26 Javascript

D3.js 从P元素的创建开始(显示可加载数据)

Oct 30 Javascript

jQuery带时间的日期控件代码分享

Aug 26 Javascript

JavaScript构造函数详解

Dec 27 Javascript

防止页面url缓存中ajax中post请求的处理方法

Oct 10 Javascript

Vuex 在Vue 组件中获得Vuex 状态state的方法

Aug 27 Javascript

vee-validate vue 2.0自定义表单验证的实例

Aug 28 Javascript

vuex 解决报错this.$store.commit is not a function的方法

Dec 17 Javascript

微信小程序 button样式设置为图片的方法

Jun 19 Javascript

vue+elementui 实现新增和修改共用一个弹框的完整代码

Jun 08 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