CSS Sprites问题 - 大小更改

Question

我遇到了这个问题而且我不确定如何解决它，也许你可以帮助我。

我想将问号作为导航项目。在悬停时，应在其上方显示一个128x128px的圆圈。

但是你可以看到我的图像是一个110x110px的圆圈，我的悬停状态圆是128x128px。

我有点想做这样的事：http://www.theflov.com/en/services

现在当我将鼠标悬停在它上面时，由于尺寸不同，圆圈会移动一点，你们有什么想法解决这个问题吗？

<header class="design-header">
    <ul>
       <li class="what-we-do"><a href="#whatwedo" class="hidetext">What we do</a></li>
    </ul>
</header>

.design-header {

background-color: #000;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */
height: 800px;  

.what-we-do{

    width:110px;
    height:110px;

    background-image: url('../img/sprites.png');
    background-position:-10px 0px;

    margin:187px auto;


            &:hover {
        cursor: pointer;    
        width:128px;
        height: 128px; 
        background-position:-3px -110px;

    }   

Answer 1

尝试将“我们做什么”容器初始设置为128 x 128，并使用background-position将非悬停状态图像置于该容器中。

当悬停时，要使两个图像状态正好显示在彼此之上需要一些试验和错误，但保持容器大小相同对您来说是必不可少的。