使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色;

hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触发第二个函数;类似于mouseover和mouseout组合具体的代码如下:

html代码:

<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">身边导航</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店</a></li>
<li><a href="#">购物</a></li>
</ul>
</div>
css:
.nav{
margin:0;
padding:0px;
width:800px;
height:100px;}
.nav ul{
list-style:none;
}
a{
text-decoration:none;}
.nav ul li{
width:100px;
height:50px;
line-height:50px;
background-color:#999;
display:inline;
float:left;
text-align:center;
font-size:18px;
font-weight:bold;
}
Jq:
$(function(){
/*
导航背景颜色切换效果 hover()
*/
$("li").hover(function(){
$(this).css("background-color","#C60");
},
function(){
$(this).css("background-color","#999");
});
			});
 

JQuery制作简单的网页导航特效的更多相关文章

  1. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  2. html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 (播放功能限mp3文件)

    使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言 这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用 还有一个特点, ...

  3. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 (可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码)

    新增视频播放功能如下图: 左侧网页left.html代码如下: <meta charset="utf-8"> <body style="backgrou ...

  5. 用CSS和jQuery制作简单的下拉框

    请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...

  6. jQuery增加删除修改tab导航特效

    HTML:         <div class="container iden_top">                <ul>             ...

  7. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  8. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  9. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

随机推荐

  1. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  2. Topcoder SRM 627 div1 HappyLettersDiv1 : 字符串

    Problem Statement      The Happy Letter game is played as follows: At the beginning, several players ...

  3. BufferHelp byte[] Stream string FileStream Image Bitmap

    /******* * *** ***** ** ** * * * * * * * * ***** * * * * * * * * * * * * * * * ******* *** * ***** * ...

  4. 【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据

    ----------------更新:2014-04-21--------------- 蒙doggo兄指教,得知有更好的方法可以代替蹩脚的0尺寸Button法,即调用窗体的验证方法Form.Vali ...

  5. 【原创】asp.net导出word 检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 8000401a

    我的服务器:windows server 2008(64位)+microsoft office 2007 企业版 业务:网站导出应聘word简历. 出现以下错误: 检索 COM 类工厂中 CLSID ...

  6. C#中WinForm窗体事件的执行次序

    C#中WinForm窗体事件的执行次序如下: 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件:        System.Windows.Forms.Control ...

  7. Eclipse web项目引用其它项目时的部署问题

    地址:http://blog.csdn.net/testcs_dn/article/details/43764497

  8. java入门必备单词

    ① anchor 锚 锚点 ② administrator 管理员 ③ application 应用程序 ④ align 对齐 ⑤ attribute 属性 ⑥ access 访问 ⑦ break 暂 ...

  9. 2016 大连网赛---Different GCD Subarray Query(GCD离散+树状数组)

    题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5869 Problem Description This is a simple probl ...

  10. UVALive 4987---Evacuation Plan(区间DP)

    题目链接 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...