如何在悬停时阻止文本移动? (涉及背景图像)

时间:2012-10-23 04:42:51

标签: html css positioning background-image

这基本上是我现在面临的问题,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;文字是静态的。

如果有人可以提供帮助,我将非常感激! =)干杯!

3 个答案:

答案 0 :(得分:2)

悬停时的宽度导致跳跃。我将它移动到“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;
}

答案 1 :(得分:1)

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

答案 2 :(得分:1)

这样做: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;
}