JQuery制作简单的网页导航特效
使用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制作简单的网页导航特效的更多相关文章
- 纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
- html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 (播放功能限mp3文件)
使用HTML语言来设计制作 Hyper Text Markup Language 超文本标记语言 这门语言的特点就是标记,就是把所有的命令单词用<>标记起来,就可以发挥作用 还有一个特点, ...
- JS——制作简单的网页计算器
用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- html制作简单框架网页二 实现自己的影音驿站 操作步骤及源文件下载 (可播放mp4、avi、mpg、asx、swf各种文件的视频播放代码)
新增视频播放功能如下图: 左侧网页left.html代码如下: <meta charset="utf-8"> <body style="backgrou ...
- 用CSS和jQuery制作简单的下拉框
请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...
- jQuery增加删除修改tab导航特效
HTML: <div class="container iden_top"> <ul> ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 ...
- JQuery制作网页——第五章 初识 jQuery
1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...
随机推荐
- 前端自动化开发之grunt
上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...
- Topcoder SRM 627 div1 HappyLettersDiv1 : 字符串
Problem Statement The Happy Letter game is played as follows: At the beginning, several players ...
- BufferHelp byte[] Stream string FileStream Image Bitmap
/******* * *** ***** ** ** * * * * * * * * ***** * * * * * * * * * * * * * * * ******* *** * ***** * ...
- 【C#】让工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据
----------------更新:2014-04-21--------------- 蒙doggo兄指教,得知有更好的方法可以代替蹩脚的0尺寸Button法,即调用窗体的验证方法Form.Vali ...
- 【原创】asp.net导出word 检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 8000401a
我的服务器:windows server 2008(64位)+microsoft office 2007 企业版 业务:网站导出应聘word简历. 出现以下错误: 检索 COM 类工厂中 CLSID ...
- C#中WinForm窗体事件的执行次序
C#中WinForm窗体事件的执行次序如下: 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件: System.Windows.Forms.Control ...
- Eclipse web项目引用其它项目时的部署问题
地址:http://blog.csdn.net/testcs_dn/article/details/43764497
- java入门必备单词
① anchor 锚 锚点 ② administrator 管理员 ③ application 应用程序 ④ align 对齐 ⑤ attribute 属性 ⑥ access 访问 ⑦ break 暂 ...
- 2016 大连网赛---Different GCD Subarray Query(GCD离散+树状数组)
题目链接 http://acm.split.hdu.edu.cn/showproblem.php?pid=5869 Problem Description This is a simple probl ...
- UVALive 4987---Evacuation Plan(区间DP)
题目链接 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...