利用css选择器的优先级实现导航栏背景图的切换.

最新推荐文章于 2024-03-14 14:24:03 发布

原创最新推荐文章于 2024-03-14 14:24:03 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍了如何利用CSS选择器的优先级来切换导航栏的背景图片。通过在HTML中设置不同的class，并在CSS中定义不同状态下的背景图片，当点击span元素时，通过动态添加或删除'cur_item'类，可以改变当前选中项的背景图片，从而实现导航栏背景图的切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图:

html 代码:

css:

.one{background: url(http://img.jiangcdn.com/home/insider/jujz_one.jpg) no-repeat;}
.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_one.jpg) no-repeat;}
.three{background: url(http://img.jiangcdn.com/home/insider/spbj_one.jpg) no-repeat;}
.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_one.jpg) no-repeat;}
.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_one.jpg) no-repeat;}
.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_one.jpg) no-repeat;}
.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_one.jpg) no-repeat;}
.cur_item{width: 218px;height: 53px;}
.cur_item span.one{background: url(http://img.jiangcdn.com/home/insider/jjjz_two.jpg) no-repeat;}
.cur_item span.two{background: url(http://img.jiangcdn.com/home/insider/jdbg_two.png) no-repeat;}
.cur_item span.three{background: url(http://img.jiangcdn.com/home/insider/spbj_two.jpg) no-repeat;}
.cur_item span.four{background: url(http://img.jiangcdn.com/home/insider/ssnz_two.jpg) no-repeat;}
.cur_item span.fiv{background: url(http://img.jiangcdn.com/home/insider/jpnz_two.jpg) no-repeat;}
.cur_item span.six{background: url(http://img.jiangcdn.com/home/insider/hfqz_two.jpg) no-repeat;}
.cur_item span.seven{background: url(http://img.jiangcdn.com/home/insider/xbsp_two.jpg) no-repeat;}

我们点击span(class='ck_item')是通过对其父元素div(class="item ") 动态添加和删除类cur_item就可以实现上图效果。