Question

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

我的想法是使用图标字体最简单，但它们只是内联的。然后我尝试使用图标字体创建一个新的并将它们放在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;
}

Answer 1

我打算为你做一个小提琴，但是jsfiddle因为maint而失败了。你将不得不使用一些脚本来处理带有图像等的复杂栏。精灵非常好而有效但是你需要至少几行脚本来支持它

查看tabs on jQueryUI的来源。上面的结构只不过是一个标签栏。

也看看这个网站。 Live Example顶部导航全部使用图像，CSS和一小部分jQuery完成。抓住这个来源也可以随时查看。

无法获取图标字体/精灵翻转来更改颜色

1 个答案: