a：活動背景圖片？

在my website我想在側面的點改變，當我在活動的div框。懸停工作正常，但我不能積極工作。圖片的路徑工作正常，當我試圖把它放在懸停下。a：活動背景圖片？

#nav{ 
    z-index: 5; 
    position: fixed; 
    top: 50%; 
    right: 20px; 
} 

#nav li { 
    position: relative; 
    height: 20px; 
    width: 20px; 
    margin-bottom: 15px; 
} 

#nav li a { 
    display: block; 
    width: 20px; 
    height: 20px; 
    text-indent: -9999px; 
    background: transparent url('images/dot.png') no-repeat;  
    opacity: 0.80; 
} 

#nav li a:hover { 
    opacity: 1; 
} 

#nav li a:active { 
    background: transparent url('images/dotactive.png') no-repeat; 
}

來源

2012-12-13 McKeene

我不認爲這是可能的圖像留在只有CSS獨自的活動背景。您還需要使用JavaScript的組合。

有了jQuery，你可以嘗試下面的東西。

.active{background: url('images/dotactive.png') no-repeat !important;} 

$('#nav li a').live('click',function() { 
    $('.active').removeClass('active'); 
    $(this).addClass('active'); 
});

編輯您的網站保持活躍導航背景圖片Workign小提琴。 http://jsfiddle.net/ukCG8/

來源

2012-12-13 23:12:11 dev

Thx很多！這非常有幫助。但不幸的是，它給了我另一個問題。如果用戶向下滾動頁面，則「主動」將出現在錯誤的地方。是否有可能禁止滾動？ – McKeene

@McKeene是的，如果你添加'body {overflow：hidden}'，這也是可能的。這將刪除滾動條，並阻止用戶滾動。很高興我能幫上忙。 **編輯*我已經更新了小提琴演示這一點。 http://jsfiddle.net/ukCG8/1/ – dev

嘗試了這一點

background: url('images/dotactive.png') no-repeat;

不需要透明

，或者使用不透明度也tranparency

來源

2012-12-13 23:20:51

無論如何，活動圖像看起來似乎很「透明」，我認爲McKeene不希望在該頁面上保持活動狀態。 – dev

@vletech他可以使用不透明來覆蓋透明度 –

試試這個：

<script language="JavaScript" type="text/javascript"> 
/*<![CDATA[*/ 
var Lst; 

function CngClass(obj){ 
if (Lst) Lst.className=''; 
obj.className='selected'; 
Lst=obj; 
} 

/*]]>*/ 
</script>

並修改立的項目，如本：

<li> 
<a onclick="CngClass(this);" href="#">Test 1 
</a> 
</li>

我希望我能拿出這筆修復的功勞;檢查它在行動here（是的，我在與另一個web開發站點stackOverflow作弊！）

來源

2012-12-13 23:28:43

a：活動背景圖片？

回答

相關問題