使用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. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  2. 未能加载文件或程序集“System.Web.Http.WebHost, Version=4.0.0.0, ”或它的某一个依赖项。系统找不到指定的文件。

    一:错误提示 "未能加载文件或程序集"System.Web.Http.WebHost, Version=4.0.0.0, Culture=neutral, PublicKeyTok ...

  3. js简单实现div宽度匀速增加/减小

    效果类似百度首页音乐盒. 点击音乐右边的div可以变长或者变短. 代码: <!DOCTYPE html> <html lang="en"> <head ...

  4. jQuery动态设置样式List item

    前段时间,Insus.NET有修改一个功能<激活当前视图菜单高亮呈现>http://www.cnblogs.com/insus/p/5287093.html 今天Insus.NET想改用另 ...

  5. 基于C#的MongoDB数据库开发应用(3)--MongoDB数据库的C#开发之异步接口

    在前面的系列博客中,我曾经介绍过,MongoDB数据库的C#驱动已经全面支持异步的处理接口,并且接口的定义几乎是重写了.本篇主要介绍MongoDB数据库的C#驱动的最新接口使用,介绍基于新接口如何实现 ...

  6. grep命令的使用

    grep是UNIX和LINUX中使用最广泛的命令之一.grep允许对文本文件进行模式查找.如果找到匹配模式, grep打印包含模式的所有行.grep支持基本正则表达式,也支持其扩展集.grep有三种变 ...

  7. C#中使用Sql对Excel条件查询

    如何在C#中实现对Excel的条件查询呢? 在使用Sql条件语句对Excel进行查询时,遇到"至少一个参数没有被指定值"的问题,如何解决? 使用OleDbConnection对象创 ...

  8. 不可或缺 Windows Native (19) - C++: 对象的动态创建和释放, 对象的赋值和复制, 静态属性和静态函数, 类模板

    [源码下载] 不可或缺 Windows Native (19) - C++: 对象的动态创建和释放, 对象的赋值和复制, 静态属性和静态函数, 类模板 作者:webabcd 介绍不可或缺 Window ...

  9. Go语言的编程范式

    由于比较古怪的语言特性,感觉代码的封装性是一种不同的思路. 包管理的火热程度居然没有nodejs高,这是为什么 package form import ( "encoding/gob&quo ...

  10. collection中的retainAll()方法

    public class ArraylistDemo { public static void main(String[] args) { Collection list1 = new ArrayLi ...