开发者社区> 问答> 正文

CSS + DIV 的问题

screenshot
要做的效果如上图
我想做一个导航,背景是用一张图片的,能不能做到当我点击链接的时候就将背景图片往下移??

<style>
ul{background:url(bg.png) no-reapt 0 0;}
ul li a:hover{这里应怎么写?我需要的是当点击资讯的时候背景的位置是 background-position:-35px -35px; 点击行情的时候背景的位置是 background-position:-85px -35px; }
</style>
不能改变<ul>的内容,可以往下添加div
<ul>
<li><a href="">首页</a></li>
<li><a href="">资讯</a></li>
<li><a href="">行情</a></li>
<li><a href="">特色</a></li>
<li><a href="">论坛</a></li>
</ul>

谢谢,如果能用js实现也可以

展开
收起
a123456678 2016-03-24 15:09:54 1960 0
1 条回答
写回答
取消 提交回答
  • 楼主想用的是CSS Sprites效果。但“当我点击链接的时候就将背景图片往下移”是什么意思,应该是Hover状态时该li背景变成下面的绿色背景吧。

    这样的话,
    没有必要为ul指定背景图,为每个li指定背景图位置就行了(no-repeat拼写出错)。
    假设代码如下:

    <nav>
    <ul>
    <li><a class="index" href="#">首页</a</li>
    <li><a class="info" href="#">资讯</a</li>
    </ul>
    </nav>
    css如下
    
    nav ul { width:***px;height:50px; }
     nav ul li { width:35px;height:50px;float:left;text-indent:-9999px; }
     nav a { width:35px;height:50px;display:block;background:url(bg.png) 0 0; }
     nav a.info { background-position:-35px -35px; }
    nav a:hover { background-position:0 -35px; }
     nav a.info:hover { background-position:-35px -85px; }
    2019-07-17 19:12:47
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载