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

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;
}​

由于背景图像增加了额外的宽度，我似乎无法弄清楚如何阻止文本向右移动。我知道有足够的空间，我只希望图像和文本是静态的。

如果有人能帮忙，我将非常感谢！ =) 干杯！

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 中删除宽度属性，当您将鼠标悬停在列表项时，宽度会增加。

这会让你的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;
}