这是怎么做到的？ （JavaScript还是其他？）

Question

我以某种方式找到了这个网页，并被导航栏惊呆了。 www.webdesignerwall.com

当您将鼠标悬停在“Home”，“About”或“Jobs”菜单选项上时，您将在上面的棕色区域中获得令人敬畏的翻转效果。我非常喜欢这个并且有类似的想法，但作为一个业余爱好者，我真的不能说那是什么类型的编程。我会说它本身使用Ajax或JavaScript，但我希望你们中的一些人向我解释，或者甚至分享一些类似的例子。

谢谢

Answer 1

这是由CSS完成的。它会在每个<span>链接元素中添加<a>个额外内容。使用CSS <span>隐藏并正确定位在菜单元素（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;
}
/* ... */

Answer 2

这种效果也可以通过没有JavaScript的CSS实现：

CSS Image rollovers

Answer 3

这只是CSS。

每个链接都有一个id属性，每个id都有自己的CSS规则，可以更改background上导航栏的hover。