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

时间:2011-12-11 06:55:39

标签: jquery html css hover grouping

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

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

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

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

... ALSO

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

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

2 个答案:

答案 0 :(得分:1)

使用javascript交换图像非常古老。您可能应该将imga合并到一个元素中,并使用css hover selector来交换背景图像(like so)。

[编辑] Here's an example using css-sprites.如果您要使用精灵,您应该将所有这些导航图像合并到一个图像中以保存http请求。

答案 1 :(得分:1)

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

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

正如您所看到的,我实际上删除了您的图片代码,并将其作为背景图片放在current标记内。这种技术比使用图像和jQuery要好得多。

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


修改
要添加当前状态,您有两种方法可以实现。一种简单的方法就是将类{{1}}添加到“当前”页面的导航项目中。

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


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