两套翻车的共同努力

http://jsfiddle.net/PaulNLondon/dG3Gb/两套翻车的共同努力

的的jsfiddle节目（我希望，它是用它我的第一次），我得这么远。。。我正尝试使用基于图像的菜单和基于文本的翻转菜单一起工作。

我无法在jsFiddle中显示此图像，但我使用的图像是显示它们的分割高度的两倍，并将鼠标悬停的位置移动以显示图像的替代版本 - 在jsfiddle我所做的只是将div的背景颜色化以显示其定位。它们被定位得非常特别，以提供所期望的视觉效果，并且具有连续性。（页面标题的文本，并在的jsfiddle第一影像区块的重叠是不是一个问题。）

我的目标是已经徘徊于对相关文本菜单项的下划线厚厚的图像转（I”已经使用了底部边框设置），并且将图像转换为在图像菜单中显示替代图像。。。 AND我想将鼠标悬停在文本菜单中的项目上以打开菜单项文本本身的下划线和使图像菜单中的关联图像切换到备用图像。

我以为我几乎在那里得到悬停的图像打开下划线，但似乎div div定位我工作只显示正确使用Firefox（因为你可以看到对齐方式没有工作的jsfiddle）。

我会很感激你的任何建议 - 即使你打算告诉我，你认为我的做法是错误的。我在这里的CSS和HTML的极限。我真的不知道任何JavaScript（除了我在Dynamicdrive上使用它和用于幻灯片的jQuery）。

来源

2012-03-11 PaulNLondon

我现在在想，如果我让文本菜单成为图形，那么我可以在非下划线和下划线之间翻页。我发现这个http://www.yourhtmlsource.com/images/rollovers.html#multiplerollovers，它显示了如何用一些JavaScript，我可以在多个位置的图像之间翻转 - 所以我可以在悬停时翻转图像和文本菜单通过图像或文本菜单的图像。这有意义吗？ – PaulNLondon 2012-03-14 16:23:38

我到达那里，并在评论中链接到的网站的帮助。。。也许它有点像形象？我已经发布在http://doublerollover.moyni.co.uk - 但我仍然对链接看起来延伸到菜单下面感到困惑。

我很感激任何有关该解决方案的意见以及我如何更有效地完成它。

来源

2012-03-16 15:24:52 PaulNLondon

啊，只是看着IE浏览器，它将图片与链接放在边界的事实让我看到，我已经从图像部分被div复制，并似乎从文本菜单下拉。。。我将在今天晚些时候回到这里工作。 – PaulNLondon 2012-03-16 15:39:43

小学生错误 - 没有创建空图像以放置在背景图像中包含的菜单文本上 - 已经从图形部分复制了一组空白图像而没有意识到。。。因此具有不同深度的空盒子，充当链接并沿页面向下延伸。 – PaulNLondon 2012-03-16 18:59:24

两套翻车的共同努力

回答

相关问题