这是如何完成的？（JavaScript还是其他？）

我以某种方式发现了这个网页，并被导航栏绝对惊呆了。 www.webdesignerwall.com这是如何完成的？（JavaScript还是其他？）

当您将鼠标放在“主页”，“关于”或“作业”菜单选项上时，您会在上面的棕色字段中获得令人敬畏的翻转效果。我非常喜欢这一点，并有类似的想法，但作为一个业余爱好者，我无法真正说出是什么类型的节目。我会说它本身使用Ajax或JavaScript，但我想让你们中的一些人向我解释，甚至分享一些类似的例子。

谢谢

来源

2010-11-01 Slavisa Perisic

您可以通过看你提到 – smirkingman 2010-11-01 14:37:41

这是由CSS完成的。它将每个<a>链接元素添加一个额外的<span>。与CSS <span> s隐藏并正确定位在菜单元素上方（absolute）。当其中一个链接悬停时，新的样式适用于正确的<span>，这使其可见。

HTML

<ul id="nav"> 
    <li id="nav-home"><a href="/>Home<span></span></a></li> 
    <li id="nav-about"><a href="/about/">About<span></span></a></li> 
    <li id="nav-jobs"><a href="/jobs/">Jobs<span></span></a></li> 
</ul>

CSS

#nav span { 
display: none;  /* hidden by default */ 
position: absolute; 
} 

#nav a:hover span { /* link:hover */ 
display: block;  /* makes one of them visible */ 
} 

#nav-home span { 
background: url(images/home-over.gif) no-repeat; 
width: 168px; /* each has it's own image */ 
height: 29px; /* dimensions */ 
top: -30px;  /* and coordinates */ 
left: 35px; 
} 

#nav-about span { 
background: url(images/about-over.gif) no-repeat; 
width: 157px; 
height: 36px; 
top: -36px; 
left: 90px; 
} 
/* ... */

来源

2010-11-01 14:31:30 galambalazs

@apnerve - 我不认为这被认为是CSS sprites。单个图像正在被使用在各自的容器中，这些容器正在被隐藏和显示。 – user113716 2010-11-01 14:41:23

@apnerve - 帕特里克是对的。 Css精灵在这里不是正确的名词。 – galambalazs 2010-11-01 14:43:18

哎呀..对不起。他们不是精灵。 – apnerve 2010-11-02 11:20:03

这种效果也可以用CSS没有JavaScript来实现：

CSS Image rollovers

来源

2010-11-01 14:30:49

网站的HTML自己解决这个问题谢谢，那东西我一直在寻找 – 2010-11-01 14:31:55

*“这种效果也可以通过不使用JavaScript的CSS来完成”*所以它是:) – jensgram 2010-11-01 14:55:38

@jensgram - 我没有看到他们的具体解决方案离子。这也是我提到的一个被删除的职位。我只是提供了可能性。 – 2010-11-01 14:58:24

这只是CSS。

每个环节都有一个id属性，每个id都有自己的CSS规则，它改变了导航栏上的hoverbackground。

来源

2010-11-01 14:31:28

这是如何完成的？ （JavaScript还是其他？）

回答

相关问题

这是如何完成的？（JavaScript还是其他？）