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

发布于 2024-09-30 06:42:17 字数 223 浏览 0 评论 0原文

我不知何故找到了这个网页，并被导航栏惊呆了。 www.webdesignerwall.com

当您将鼠标放在“主页”、“关于”或“工作”菜单选项上时，您会在上面的棕色字段中看到令人惊叹的翻转效果。我非常喜欢这个，也有类似的想法，但作为一个业余爱好者，我真的不能说那是什么类型的编程。我想说它本身使用 Ajax 或 JavaScript，但我希望你们中的一些人向我解释它，甚至分享一些类似的示例。

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

动次打次papapa 2024-10-07 06:42:17

这是由 CSS 完成的。它将额外的放置到每个链接元素中。使用 CSS 可以隐藏并正确定位在菜单元素上方（absolute）。当其中一个链接悬停时，新样式将应用于正确的，使其可见。

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;
}
/* ... */

This is done by CSS. It places an extra <span> into every <a> link element. With CSS <span>s are hidden and positioned correctly above the menu elements (absolute). When one of the link is hovered the new style applies to the correct <span> which makes it visible.

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;
}
/* ... */

回复收藏 0 原文