怎么用JS实现鼠标点击保留导航链接划过的样式?(请仔细看CSS样式,要求两边的样式都可以保留)
怎么用JS实现鼠标点击保留导航链接划过的样式?(请仔细看CSS样式,要求两边的样式都可以保留)html代码如下:<divclass="nav"id="nav"><ahre...
怎么用JS实现鼠标点击保留导航链接划过的样式?(请仔细看CSS样式,要求两边的样式都可以保留)
html代码如下:
<div class="nav" id="nav">
<a href="index.html" class="cur"><span>首页</span></a>
<a href="introduct.html"><span>关于波波</span></a>
<a href="#"><span>最新资讯</span></a>
<a href="video_list.html"><span>壹周立波秀</span></a>
<a href="new_list.html"><span>精彩瞬间</span></a>
<a href="#"><span>周立波语录</span></a>
<a href="http://t.sina.com.cn/zhoulibo" target="_blank"><span>周立波微博</span></a>
<a href="recomment.html"><span>网友评论</span></a>
<a href="#"><span>留言板</span></a>
</div>
CSS样式如下:
.top { width:980px; height:390px; margin:0 auto;}
.top .nav { width:960px; padding:0 10px; height:32px; padding-top:8px; background:url(../images/nav_bg.gif) repeat-x; line-height:32px;}
.top .nav a { display:block; float:left; padding-left:10px; color:#fff; font-weight:bold; font-size:14px; margin-right:8px;}
.top .nav a span { padding-right:10px; float:left; display:block;}
.nav a:hover ,.nav a.cur { background:url(../images/nav_hover.gif) left 0 no-repeat; color:#cc0000; text-decoration:none;}
.nav a:hover span ,.nav a.cur span{ background:url(../images/nav_hover.gif) right 0 no-repeat; cursor:pointer;}
请高手指导,最好附上详细的JS代码,小弟感激不尽! 展开
html代码如下:
<div class="nav" id="nav">
<a href="index.html" class="cur"><span>首页</span></a>
<a href="introduct.html"><span>关于波波</span></a>
<a href="#"><span>最新资讯</span></a>
<a href="video_list.html"><span>壹周立波秀</span></a>
<a href="new_list.html"><span>精彩瞬间</span></a>
<a href="#"><span>周立波语录</span></a>
<a href="http://t.sina.com.cn/zhoulibo" target="_blank"><span>周立波微博</span></a>
<a href="recomment.html"><span>网友评论</span></a>
<a href="#"><span>留言板</span></a>
</div>
CSS样式如下:
.top { width:980px; height:390px; margin:0 auto;}
.top .nav { width:960px; padding:0 10px; height:32px; padding-top:8px; background:url(../images/nav_bg.gif) repeat-x; line-height:32px;}
.top .nav a { display:block; float:left; padding-left:10px; color:#fff; font-weight:bold; font-size:14px; margin-right:8px;}
.top .nav a span { padding-right:10px; float:left; display:block;}
.nav a:hover ,.nav a.cur { background:url(../images/nav_hover.gif) left 0 no-repeat; color:#cc0000; text-decoration:none;}
.nav a:hover span ,.nav a.cur span{ background:url(../images/nav_hover.gif) right 0 no-repeat; cursor:pointer;}
请高手指导,最好附上详细的JS代码,小弟感激不尽! 展开
2个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询