更改頁面滾動上的活動導航圖像？

我試圖重現一個類似的導航欄，以使用本網站上的內容：http://www.julisudi.com/。我期待的主要效果是在頁面上顯示正確的錨點時讓每個圖像都處於活動狀態。更改頁面滾動上的活動導航圖像？

我已經看到了這通過http://jsfiddle.net/Vandeplas/up4nu/150/文本做我也創造了一些圖像，並使用下面的CSS重現「變色」的效果時，圖像變得活躍：

#mainmenu a img { 
    position: relative; 
    margin-bottom: -30px; 
    margin-top: 5px; 
} 

#mainmenu a img:hover, #mainmenu a img.active{ 
    top: -31px; 
}

我的問題正在取代jfiddle中的代碼，使其能夠處理圖像而不是文本。如果任何人都能幫上忙，那會很棒！

來源

2014-03-30 pie_masters

您可以在任何元素上使用id，它可以是<p>或<img>。

在菜單中，如果<a>填充了文本img或兩者都沒有關係。

http://jsfiddle.net/up4nu/2682/

來源

2014-03-30 11:07:39

我明白了，但看不到我的代碼。這是它的一個減少版本：http://jsfiddle.net/WSc66/。懸停效果起作用，但圖像不會獲得應用於它們的活動分組。 –

@ user3477755你沒有加載jQuery框架，也沒有正確寫入你的選擇器。 class active設置在li上，而不是img更新你的小提琴：http://jsfiddle.net/WSc66/1/ –

謝謝你的完美！我開始認爲在查看其他示例之後，.active應該位於li上，但我不知道.active可以放在選擇器的中間。現在爲了讓它與我的網站一起工作，在jsfiddle上它與'onload'一起使用，但不是在這是我現在遇到的問題。 –

更改頁面滾動上的活動導航圖像？

回答

相關問題