Jquery鼠标点击后变色，点击另一个按钮颜色还原
查看: 2559|
摘要: script type=&text/javascript& src=&/jquery-latest.js&/scriptscript type=&text/javascript&$(function(){ $(&#nav li&).click(function(){
$(&#nav li&).eq($(this) ...
&script type="text/javascript" src="/jquery-latest.js"&&/script&&script type="text/javascript"&$(function(){& $("#nav li").click(function(){& & $("#nav li").eq($(this).index()).addClass("navdown").siblings().removeClass("navdown");& })})&/script&&style&a{text-decoration: color:#666666;}#nav ul{ list-style: float: text-align: margin-top: 18 line-height: 42 margin-left: -2}#nav ul li{ font-family:"微软雅黑","宋体"; font-size:14 font-style: font-weight: letter-spacing:4}#nav ul li a:hover{ color:#666666;border:1px solid #F00;}.navdown a{color:#ff0000; border:1px solid #F00;}&/style&&body&& &&div id="nav"&& & & &ul&
&&li class="navdown"&&a href="#"&&span&网站首页&/span&&/a&&/li& & & & & & &li&&a href="#"&&span&关于我们&/span&&/a&&/li&
&&li&&a href="#"&&span&新闻资讯&/span&&/a&&/li&
&&li&&a href="#"&&span&产品展示&/span&&/a&&/li&
&&li&&a href="#"&&span&客户案列&/span&&/a&&/li&
&&li&&a href="#"&&span&联系我们&/span&&/a&&/li&
&&/ul&& &&/div&&/body&
）学习是Inke以个人名义搭建的关于湖南省祁东县在线学习网站-祁东人家核心模块，致力于为祁东地方门户提供一个自由、便捷的在线学习交互平台，祁东人家此外还将为远在他乡的祁东家乡朋友提供家乡祁东县最具特色的信息、祁东渔鼓在线、祁东房产信息、祁东人才及祁东论坛交互，并为营造一个自由、便捷的家乡地区平台，祁东人家一直在努力，感谢所有来访祁东新闻模块的家乡朋友，正因为有你们，才有了祁东人家前进的动力！
本站广告合作咨询（QQ：）HTML5/CSS3系列教程：HTML5基本标签使用header，nav和footer | Hello world!小组 | 果壳网 科技有意思
117359人加入此小组
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下：#nav{
padding: 10px
... }#header{
padding: 10px
... }#footer{
padding: 10px
... }定义完之后呢，我们使用div标签来组织页面结构，如下：&div id="header"&&/div&&div id="nav"&&/div& &div id="footer"&&/div& 这样的代码让我们创建了很多的非样式的CSS定义，是的代码结构复杂并且不直观易懂。在新的HTML5标准中，我们定义了一系列的标签，帮助你更语义化的定义页面层次和逻辑，你不需要自己定义相关的DIV，HTML5提供了现成的标签来完成上述的结构化定义，如下：&header&&/header&&nav&&/nav&&footer&&/footer&使用以上的标签，你只需要在css文件中定义相关的真正的样式信息即可。 在今天的这篇文章中，我们将介绍相关的基本HTML5标签Header，nav和footer。header标签在新的标准中header标签定义如下："A group of introductory or navigational aids.”基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单只是定义页头内容，也可以定义页头以下其它内容的介绍。这和我们传统的页面header定义并不完全一致。例如：&header& &h1&HTML5基本标签使用，header，Nav和footer&/h1& &div class="post-meta"&
&p&作者信息:&/a& &span class="category"&文章创建类别：HTML5/CSS3&/span&&/p&
&/div&&/header&&article& &p&大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分&/p&&/article&在上面的结构中，我们可以看到使用header我们定义了一篇文章的标题和内容。这里header标签的使用并不是页面的页头，而是文章的页头。所以在HTML5中，header的使用更加灵活，你可以根据你的需要来定义和组织document结构。Nav标签Nav标签全称navigation，顾名思义，是导航的意思。根据HTML5的相关标准定义如下："A section of a page that links to other pages or to parts within the page: a section with navigation links."中文翻译大概意思是”页面中的一个用来链接到其它页面或者当前页面的区域：一个含有导航链接的区域”。这里非常清楚的定义了nav标签的功能，这里和header类似并没有指定必须是主导航，也可以是页面其它部分的子导航。如下：&h3&文章列表&/h3&&nav& &ul&
&li&&a href="#html5"&HTML5文章介绍&/a&&/li&
&li&&a href="#css3"&CSS3文章介绍&/a&&/li&
&li&&a href="#jquery"&jQuery文章介绍&/a&&/li& &ul&&/nav&在上面这个例子中，我们看到这里只是一个区域的文章导航，同样也可以使用nav定义一个小型的页面内导航。Footer标签最后一个就是footer标签，即，页底标签。使用这个标签你可以定义页面的低端结构，当然，和上面我们介绍header标签或者nav标签一样，它并不是仅仅使用在整个页面的页尾处。相关的HTML5标准定义如下：“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”中文意思是：”footer元素代表了页面内容或者区域内容最底端的展示。一个典型的例子是包含了作者信息，文档链接或者是版权信息等等“。当然，这里我们看到并不局限于整个页面的内容，也可以是一个文章的页尾内容，例如，来源或者是作者信息等等。如下：&footer& &div class="tags"&
&span class="tags-title"&相关标签&/span& &a href="#" rel="tag"&html5&/a&, &a href="#" rel="tag"&nav&/a&, &a href="#" rel="tag"&header&/a&, &a href="#" rel="tag"&footer&/a& &/div& &div class="source"&
&div&来源：&a href=""&html5/css3教程&/a&&/div&
&/div&&/footer& 在上面的例子中，我们定义了一个简单的文章内的页尾信息，可以看到我们添加了来源和相关标签，这在博客类型的网站中经常出现。一个完整的HTML5页面在这里我们使用基本的header，nav和footer标签书写了一个响应式的HTML5页面，如果你使用老版本的浏览器，例如IE6,7等等。需要引入相关的js来帮助识别新的元素，当然，你也可以使用下面js代码来简单生成。/*
* 创建HTML5标签
document.createElement("article"); document.createElement("section");具体代码实现，请下载后阅读。这里我们使用了一个前端框架 - ，如果你兴趣可以阅读这篇文章 -。总结相 对于其它的HTML5特性来说，header，nav和footer显得不是那么的酷，当时作为一个前端开发人员来说，如何能够正确的组织页面结构对于一 个逻辑性很强，页面也很复杂的项目来说，意义依旧是非常重大的。希望今天的这篇文章能够帮助大家简单直观的了解这些基本的HTML5标签，如果你有任何的 问题或者建议，请在下面给我们留言或者访问提问。如果你对于其它HTML5技术感兴趣，也可以阅读我们的。来源：
+ 加入我的果篮
(C)2015果壳网&京ICP备号-2&京公网安备Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
Ok, so I have a jsfiddle of my problem here:
Full Screen result is here:
I am trying to get rid of the box-shadow inset on a:hover of the submenu that pops up when hovering over the Menu 2 Item, but am not having any luck at all with this.
I'd rather just target the first &ul& &li& &a& elements and not the &ul& &li& &ul& &li& &a& elements.
I have tried this everyway I can think of by using & symbols to just grab the immediate children, but this doesn't seem to help at all.
HTML is as follows (within the body tag):
&nav id="main_menu" class="nav center"&
&ul class="menu"&
&li&&a accesskey="1" href="#"&Menu 1&/a&&/li&
&li class="current"&
&a accesskey="2" href="#"&Menu 2&/a&
&ul class="sub_menu"&
&li&&a href="#"&Sub 1&/a&&/li&
&li&&a href="#"&Sub 2&/a&&/li&
&li&&a href="#"&Sub 3&/a&&/li&
&li&&a accesskey="3" href="#"&Menu 3&/a&&/li&
&li&&a accesskey="4" href="#"&Menu 4&/a&&/li&
&li&&a accesskey="5" href="#"&Menu 5&/a&&/li&
&li&&a accesskey="6" href="#"&Menu 6&/a&&/li&
&li&&a accesskey="7" href="#"&Menu 7&/a&&/li&
CSS is as follows:
nav#main_menu {
width: 100%;
background: #A92A23;
font-size: .8
font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
margin-top: -.3
border-bottom: .15em solid #7c211c;
border-top: .15em solid #7c211c;
z-index: 1001;
padding: 0;
width: 100%;
nav#main_menu li {
margin-left: -.2
nav#main_menu ul.menu li a {
display: inline-
width: 13.2%;
text-align:
text-decoration: none !
nav#main_menu ul.menu li & a {
border-right: 1px solid #576979;
color: #f2efe9;
background: #A92A23;
line-height: 3
/* text-shadow: 1px 1px 0px #7c211c; */
-o-transition: color .2s ease-out, background .5s ease-
-ms-transition: color .2s ease-out, background .5s ease-
-moz-transition: color .2s ease-out, background .5s ease-
-webkit-transition: color .2s ease-out, background .5s ease-
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background .5s ease-
nav#main_menu ul.menu li a {
box-sizing: border-
-moz-box-sizing: border-
-webkit-box-sizing: border-
text-transform:
nav#main_menu:first-child li {
margin-left: 0px !
nav#main_menu ul.menu li:last-child a {
border-right: 0;
nav#main_menu ul.menu li & a:hover, nav#main_menu ul.menu li & a:active, nav#main_menu ul.menu li.current & a {
background-color: #f2efe9;
color: #A92A23;
-webkit-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
-moz-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
nav#main_menu ul.menu li.current & a {
height: 3.15
border-left:
border-right:
z-index: 2;
nav#main_menu a#pull {
.desc, .h4_desc, .desc_bold {
line-height: 1.5
li ul.sub_menu {
width: 100%;
height: 0;
background-color: #f2efe9 !
border-bottom: .15em solid #605953;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
li.current ul.sub_menu li {
padding: 0;
li.current:hover ul.sub_menu {
li.current:hover ul.sub_menu li {
nav#main_menu ul.menu ul.sub_menu a {
padding: .5em .8
border-left:
border-right:
width: auto !
color: #A92A23 !
background: none !
border: none !
height: 0;
I don't want these CSS Rules effecting any other ul elements on the page, so I was kinda strict in the declaration of them.
Basically, what I am really trying to do is to drop down the ul.sub_menu with the transition css code on the height, when the user mouses over Menu 2, which isn't working.
But the other problem I am having, is how to get the a:hover only on the nav#main_menu ul.menu li a:hover elements and not the children a:hover elements of
ul.sub_menu li?
55.3k1670106
1,70832241
get rid of nav#main_menu ul.menu li & a:hover, nav#main_menu ul.menu li & a:active so the box-shadow class only remains on nav#main_menu ul.menu li.current & a.
Working example here:
Make the selectors more specific:
nav#main_menu ul.menu & li & a:hover, nav#main_menu ul.menu & li & a:active, nav#main_menu ul.menu & li.current & a
4,70652871
I think you're just forgetting to use an additional child selector to target the correct links in the first place:
nav#main_menu ul.menu & li & a
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Upcoming Events
Stack Overflow works best with JavaScript enabled3976人阅读
　　创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。
　　现在我们正常的做法是应用ul、li标签把链接作为无序列表（unordered&list）来标识。再应用CSS样式对其进行控制，按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的，因为我们习惯于把无序列表作为一个竖着推起来的列表项目，每个前面都放着一个列表预设标记。这似乎不符合导航条水平方向的习惯。但作为独立列表项目集合的列表逻辑结构能够适用于导航条里的链接；而CSS的规则让你能够强制取代列表项目缺省的表现形式，以消除它们并安排列表项在容器内按水平方向排列，而不是从上而下的规则。现在让我们来看看实例，根据无序列表创建CSS样式和XHTML标签的横向导航菜单。
&&div id=&nav&&&&&&
& &ul&&&&&
&&& &li&&a href=&/&&HomePage&/a&&/li&&&&&
&&& &li&&a href=&/&&Div+CSS教程&/a&&/li&&&&&
&&& &li&&a href=&/&&CSS布局实例&/a&&/li&&&&&
&&& &li&&a href=&/&&CSS2.0教程 &/a&&/li&&&&&
&&& &li&&a href=&/&&CSS在线手册&/a&&/li&&&&&
&&& &li&&a href=&/&&Web标准&/a&&/li&&&&&
&&& &li&&a href=&/&&XHTML教程&/a&&/li&&&&&
& &/ul&&&&&
我们再看看关于这段CSS代码：
我们来看看上面的代码的完整HTML，复制出来放到一个HTML页面中，大家可以看到效果：
　　下面我们来解析上面的代码：
　　xhtml代码首先定义了一个容器div&id=&nav&。这个容器用来放置这个无序列表横向导航菜单的内容，但也有人认为这个容器是多余的，直接定义ul&id=&nav&就可以了。我们不建议你这样做，要知道我们的站点是可扩展的，我们要为将来的扩展留有足够的余地，如果我们的导航样式设计的更加复杂，仅有的ul是不能满足需要的。我们定义这样的容器也更符合我们编写代码的习惯。
　　#nav定义了窗口的宽高及背景颜色。#nav&ul包含有margin和padding声明，字体及颜色声明。line-height:&30是非常重要的定义，如果取消掉行高的定义，我们的链接文字垂直居中就可能受到影响。white-space:&或许大家并不能理解有什么作用，它定义了强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
　　#nav&li中的list-style-type:&去除了列表项所使用的预设标记。使其更象是纯文本，而没有列表标记。display:&声明则能够让列表项目在页面上从左向右浮动，而不会让每个项目显示在单独的行里而从上至下的排列。这两项声明是我们实现无序列表横向导航菜单的关键。
　　#nav&li&a和#nav&li&a:hover定义了链接的样式。其中的内容就不作深入了，唯一要讲的就是：padding:&7px&10它是用来控制链接文字之间的空白间隔的，你可以试着改变数值试试看。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：392782次
积分：5323
积分：5323
排名：第2546名
原创：233篇
转载：11篇
评论：65条
(3)(2)(1)(1)(5)(3)(1)(3)(4)(1)(1)(1)(3)(5)(2)(1)(2)(2)(1)(11)(8)(16)(25)(16)(2)(1)(11)(24)(17)(17)(10)(16)(13)(11)(4)