Проблема с CSS Sprites - Изменения размера

Я столкнулся с этой проблемой, и я не уверен, как ее решить, возможно, вы можете мне помочь.Проблема с CSS Sprites - Изменения размера

Я хочу задать вопрос Пометка как элемент навигации. И при наведении на него должен появиться круг с 128x128px.

Но, как вы можете видеть, у меня есть изображение, которое является кругом 110x110px, и мой круг состояния наведения составляет 128x128 пикселей.

я вроде хотел сделать что-то вроде этого: 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; 

    }

two question marks

источник

2014-01-31 Lars Mertens

Просто сделайте начальное изображение того же размера и центрируйте его по вертикали и по горизонтали. Это будет намного проще. –

a: hover, a: focus { цвет: # DF4B55; } –

У вас есть опечатка в классе элемента li. он должен сказать 'what-we-do' не' wat-we-do' –

Попробуйте делает «что мы-до» контейнер первоначально 128 х 128 и центрирования без парения-состояния изображения в этом контейнере с помощью background-position.

Для того, чтобы два состояния изображения отображались справа друг на друга, когда они зависали, потребуется немного проб и ошибок, но сохранение контейнера того же размера будет для вас существенным.

источник

2014-01-31 23:13:42 richfinelli

Проблема с CSS Sprites - Изменения размера

ответ

Смежные вопросы