首頁猿問 CSS + DIV 的問題

CSS + DIV 的問題

JavaScript

幕布斯6054654 2018-08-13 10:09:29

要做的效果如上圖我想做一個導航，背景是用一張圖片的，能不能做到當我點擊鏈接的時候就將背景圖片往下移？？<style>ul{background:url(bg.png) no-reapt 0 0;}ul li a:hover{這里應怎么寫？我需要的是當點擊資訊的時候背景的位置是 background-position:-35px -35px; 點擊行情的時候背景的位置是 background-position:-85px -35px; }</style>不能改變<ul>的內(nèi)容，可以往下添加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實現(xiàn)也可以

查看完整描述

1 回答

臨摹微笑

TA貢獻1982條經(jīng)驗獲得超2個贊

樓主想用的是CSS Sprites效果。但“當我點擊鏈接的時候就將背景圖片往下移”是什么意思，應該是Hover狀態(tài)時該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; }

上面的尺寸根據(jù)背景圖來定。

反對回復 2018-09-14