更改页面滚动上的活动导航图像？

我试图重现一个类似的导航栏，以使用本网站上的内容：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'一起使用，但不是在这是我现在遇到的问题。 –

更改页面滚动上的活动导航图像？

回答

相关问题