css hover on image

Question

У меня есть эта простая проблема. Я попытаюсь объяснить с примером кода

Изображение в тд

<td style="text-align:right;"><a class="ratingstar" href="javascript:rate('1','27')" title="1"><img src="assets/images/star.png" alt="*" /></a></td> 

Css для этого изображения

.ratingstar:hover img, .ratingstar:focus img 
{ 
    margin-bottom: 3px; 
} 

Так что, когда я парить на изображение перемещается вверх немного, чтобы дать это подняло чувство. Проблема в том, что в то же время высота td увеличивается, и поэтому элементы ниже подталкиваются вниз.

Как сохранить фиксированный размер td при снятии моего изображения. Я могу увеличить высоту td, чтобы решить эту проблему, но поскольку это мобильный сайт, я не хочу устанавливать определенную высоту в размере, но расширять ее в соответствии с содержимым внутри.

Надеюсь, это достаточно ясно.

Answer 1

Первое решение (виден на сайте CSS-трюки): использовать относительное позиционирование как

.ratingstar:hover img, .ratingstar:focus img { 
    position: relative; 
    bottom: 3px; 
} 

Второе решение: играть с набивкой дно происходит от 3 до 0px, когда край дно от 0 до 3px, если это позволяет ваш дизайн.
Редактировать: Он также может быть граничным или нижним (того же цвета, что и ваш фон, если это не градиент или изображение, но уникальный цвет)

Answer 2

Вы можете сделать это с отрицательным верхним краем:

.ratingstar:hover img, .ratingstar:focus img 
{ 
    margin-top: -3px; 
} 

Или, если вам не нужно реальное изображение, вы можете сделать это очень легко с помощью фонового изображения и позиционирования.

.ratingstar 
{ 
    background-image: url(assets/images/star.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
} 
.ratingstar:hover img, .ratingstar:focus img 
{ 
    background-position: 0 -3px; 
}