如何在悬停时阻止文本移动？ （涉及背景图像）

Question

这基本上是我现在面临的问题，http://jsfiddle.net/NCJeP/。

HTML

      <nav>
    <ul id="city-navigation">
        <li><a href="../chennai/" class="active">Chennai</a></li>
        <li><a href="../trichy/">Trichy</a></li>
        <li><a href="../madurai/">Madurai</a></li>
        <li><a href="../coimbatore/">Coimbatore</a></li>
        <li><a href="../salem/">Salem</a></li>
    </ul>
    </nav>​

CSS

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}​

我似乎无法弄清楚如何阻止文本移动到右边，因为背景图像增加了额外的宽度。我知道有足够的空间，我只想要图像＆amp;文字是静态的。

如果有人可以提供帮助，我将非常感激！ =）干杯！

Answer 1

悬停时的宽度导致跳跃。我将它移动到“a”标签并清理了其他代码：

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
    display: block;
    text-align: center;
    width: 116px;
    height: 60px;
}
#city-navigation li a:hover {
    background: url(http://i.imgur.com/QVzKG.png) no-repeat;
    color: #000;
}
#city-navigation .active {
    background: url(http://i.imgur.com/HbLa1.png) no-repeat;
    color: #000;
}

Answer 2

从#city-navigation .active和#city-navigation li a:hover移除width属性，这会导致在您将列表项悬停时宽度增加。

这将使您的css代码看起来像

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 20px;
    color: #FFF;
}

#city-navigation li a:hover {
    background-image: url(http://i.imgur.com/QVzKG.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
    position: relative;
    z-index: 4;
}

#city-navigation .active {
    background-image: url(http://i.imgur.com/HbLa1.png);
    background-repeat: no-repeat;
    color: #000;
    height: 60px;
    display: block;
    text-align: center;
}​

Answer 3

这样做：My Fiddle

以为我没有为您清理，但使用inline-block并在导航周围取出不必要的边距..

CSS

body {
    background-color: red;
}

#city-navigation {
    width: 100%;
    position: relative;
    left: 10px;
}

#city-navigation li a {
    float: left;
    font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
    margin: 20px 0px;
    color: #FFF;
    display: inline-block;
    width: 116px;
    text-align: center;
}

#city-navigation li a:hover {
    background-image: url('http://i.imgur.com/QVzKG.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: inline-block;
    text-align: center;
    position: relative;
}

#city-navigation .active {
    background-image: url('http://i.imgur.com/HbLa1.png');
    background-repeat: no-repeat;
    color: #000;
    width: 116px;
    height: 60px;
    display: block;
    text-align: center;
}