0

我正在尝试在我的主导航上方放置一些相关图标。本质上，我想要完成的是当用户将鼠标悬停在适当的区域（具有大填充的标签）上时，将文本和图标更改为不同的颜色。我在实现这一点时遇到了问题。

我的想法是使用图标字体最容易做到这一点，但它们只是内联的。然后我尝试使用图标字体制作一个新字体并将它们放置在 man nav 上方，但是当用户将鼠标悬停在指定区域上时，我无法弄清楚如何让它改变颜色。

我还尝试了翻转方法，但我无法开始工作，因为当我在标签中创建一个类并将显示更改为阻止时，它会关闭我的导航。我的代码：

 <ul id="nav" role="navigation">
   <li><a href="#">EXCERPT</a></li>
   <li><a href="#">ABOUT</a></li>
   <li><a href="#">CONTACT</a></li>
</ul>

#header {
   overflow: hidden;
   background-color: #F5F5F5;
   border-bottom: 2px black solid;
   position: relative;
}

#nav {
   float: right;
   position: absolute;
   bottom: 0;
   right: 0;
   margin: 0 0 10px 0;
}

#nav li {
   list-style: none;
   display: inline;
   font-size: 2.5em;
   letter-spacing: 0.1em;
   font-family: 'OstrichSansMedium';
}

#nav a {
   text-decoration: none;
   color: #C4C4C4;
   padding: 200px 20px 15px;
}

#nav a:hover {
   color: #000000;
   background-color: green;
}
4

1 回答 1

0

我打算为你做一个小提琴，但 jsfiddle 已经停止维护了。您将不得不使用一些脚本来处理带有图像等的复杂条形图。精灵非常好且有效，但同样您至少需要几行脚本来支持它

查看jQueryUI 上选项卡的来源。您上面的结构只不过是一个标签栏。

也看看这个网站。现场示例顶部导航全部由图像、CSS 和一点点 jQuery 完成。抓住这个的来源，这样你就可以随时查看它。

于 2013-02-23T02:56:39.670 回答