Question

我还没有真正做过背景导航翻转，我通常只是在文本翻转后更改文本的颜色。但是我现在尝试这样做，但似乎无法做到这一点。

我正在尝试用CSS完成所有操作，因为我相信有一种方法，但我确实看到很多其他人使用精灵和图像翻转。哪种方式最好？我可能最终在我的网站上有很多图像，所以我试图远离它们所以我自己，我正在考虑严格的CSS。有办法吧？

CSS

#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}

HTML

<nav id="main-navigation">
           <ul id="main-nav-left">
               <li class="current"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Current Season</a></li>
               <li><a href="#">Past Seasons</a></li>
               <li><a href="#">Contact</a></li>
               <li><a href="#">Partners/Sponsors</a></li>
           </ul>
  </nav>

但我希望它看起来像这样 enter image description here

我错过了什么？

Answer 1

使用此

#main-navigation li a:hover {
    color: #c7bd89;
    background-color: #900;
    width: 120%;
    line-height: 30px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 30px;
}

所有的问题是你要定义一个高度...你应该定义一个行高，它将完美地工作......但我仍然可以找到填充和边距方面的改进空间。 / p>

Answer 2

查看代码和演示的小提琴

小提琴：http://jsfiddle.net/quR4E/3/

演示：http://jsfiddle.net/quR4E/3/embedded/result/

屏幕截图：

enter image description here

Answer 3

尝试将#main-navigation li a更改为：

#main-navigation li a {
   /*display: block;*/
   text-decoration: none;
   color: black;
   padding: 5px;
}

使用显示块将文本推到方框外。添加填充将在文本周围留出一些空格。

Sprites肯定比使用多个图像更好，但最终它们基本上是相同的。如果您可以创建足够小的图像（用于带宽性能），它将不会对您的网站造成太大影响。精灵很适合分组图像。在文本周围使用背景颜色和边框也是一种非常有效的方法。

Answer 4

看看我在这里做了什么：http://torontobanfffilmfest.com/splash

八个区块中的每一个都有两个版本的单个图像，一个浅，一个暗，并排连接。例如，在左上角是一个图像splash_buy_tickets_m.png，宽度为582像素。但它显示的空间是291像素宽。我们只看到完整图像的一半，而一半取决于：悬停。

在翻转时改变图像的CSS非常简单：

#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
 background-position: -291px 0;
}

如果按钮栏中的每个按钮都包含“活动”和“非活动”版本，那么您只需更改DIV中显示的图像位置，水平或垂直移动。

CSS翻转导航

4 个答案: