将鼠标悬停在一个元素上影响另一个

Question

看一看： 一个链接 。 您可以看到顶部菜单栏上的图标在您将鼠标悬停在其上时变为蓝色，并且当您将鼠标悬停在它们上方时，它下面的页面链接会变为白色...我希望他们两个都可以在您进行悬停效果时鼠标悬停其中一个......本质上，我希望当你将鼠标悬停在页面链接上时，图标会变成蓝色，我希望当你将鼠标悬停在图标上时，页面链接会变为白色（显然我只想要图标在页面链接上方，当正确的页面链接被悬停时点亮，反之亦然）。

我正在使用jquery进行图像悬停效果...

页面链接代码只是一个简单的css悬停代码。 我希望将这两者作为一个单元联系在一起。

我也想知道点击它后图标是否可以保持亮起（显示你所在的页面）...

也...

我有一个问题，当网站最小化到一个较小的窗口...当你水平滚动...包装被切断，所有你看到的是白色空间！ 我玩过它很多，没用！ 我做了一个浮动，但后来我无法居中！

如果有人可以帮助解决这两个问题，我们将不胜感激！

Answer 1

使用javascript交换图像非常古老。 您应该将img和a合并到一个元素中，并使用css悬停选择器来交换背景图像（ 如此 ）。

[编辑] ： 这是一个使用css-sprites的例子。 如果您要使用精灵，您可能应该将所有这些导航图像合并到一个图像中以保存http请求。

Answer 2

这并不难实现。 而不是使用a:hover ，使用li:hover a ，当您将鼠标悬停在<li>任何部分上时，无论是链接还是图像，都可以使用。

预览： http ： //jsfiddle.net/Wexcode/FZjzG/

如您所见，我实际上删除了您的图像标记，并将其作为背景图像放在<a>标记内。 这种技术比使用图像和jQuery要好得多。

如果你喜欢使用这种技术，有更好的方法。 如果您有兴趣了解更多信息，请阅读CSS Sprites 。

---

编辑：
要添加当前状态，您有两种方法可以实现。 一种简单的方法就是将类current添加到作为“当前”页面的导航项。

请参阅： http ： //jsfiddle.net/Wexcode/FZjzG/1/

---

请在另一个问题中发布您的其他问题...您应该尝试在每个帖子中保留一个问题。