hover - 具有不同悬停尺寸的 CSS 悬停问题

Question

现在我正在做的是有一个文本导航，但在悬停时仍然保留文本，但使用图像作为背景。

由于文本大小不同且背景图像大小相同，因此这成为一个问题，因为我只有 597px 的导航区域可供使用，而且我还希望每个导航选择之间的间距相同。

例如我想要这个..

但目前我得到了这个:

导航背景图像的宽度为 87 像素，因此显然它正在环绕，因为我们没有足够的空间。但我们最终也会在每个导航项之间得到不同的空间量，因为每个导航项都设置为 87px。

所以我想知道是否有任何干净的方法可以在不使用 javascript 的情况下做我想做的事情，并且当鼠标悬停在其他元素上时导航项不会跳来跳去？

我尝试在不同的状态上设置不同的宽度，但导航只是跳来跳去，看起来很糟糕。

有什么想法可以做我想做的事吗？

如果您想查看我当前的 HTML 和 CSS，如下所示:

HTML:

<div class="nav_wrapper">
    <ul class="nav">
        <li><a href="index.php">HOME</a></li>
        <li><a href="about.php">ABOUT US</a></li>
        <li><a href="services.php">SERVICES</a></li>
        <li><a href="our_process.php">OUR PROCESS</a></li>
        <li><a href="portfolio.php">OUR WORK</a></li>
        <li><a href="">BLOG</a></li>
        <li><a href="free_quote.php">FREE QUOTE</a></li>
        <li><a href="contact_us.php">CONTACT US</a></li>
    </ul>
    <!-- Nav Ends -->
    <div class="contentClear"></div>
</div>
<!-- Nav Wrapper Ends -->

CSS:

#header .nav_wrapper {
    float: left;
    width: 597px;
    margin: 30px 0 0 50px;
}

#header .nav_wrapper .nav {
    list-style-type: none;
    list-style-image: none;
}

#header .nav_wrapper li {
    float: left;
    height: 23px;
    min-width: 87px;
    font-family: "Zurich Cn BT", Tahoma;
    font-size: 12px;
    text-align: center;
}

ul.nav li a, ul.nav li a:visited, ul.nav li a:focus {
    display: block;
    line-height: 23px;
    color: #764422;
    text-decoration: none;
}

ul.nav li a:hover, ul.nav li a:active {
    color: #fff;
    text-decoration: none;
    background-image: url(../images/nav-bg.png);
}

Answer 1

我要做的就是为每个 <li> 设置样式的宽度与背景图像的大小(即 87px)。如果空间确实成为问题，那么我会创建一些不同的背景图像(例如 70px、87px 和 95px)并设置它们各自的宽度 <li>相应地。这是一个简单的解决方案，效果很好，并且不会增加任何 js 复杂性。