У меня есть куча элементов li с фоновыми изображениями, которые отлично работают в нормальном состоянии. В ту минуту, когда я добавляю класс hover к любому из изображений, они перемещаются по оси Y примерно на 25 пикселей вниз по странице, когда вы наводите указатель мыши на это конкретное изображение. Я попытался установить «background-position: 0 0» в состояниях наведения вместе с полем и т. Д., И ничего не сработало. Я также пытался изменить элементы, чтобы вместо этого использовалось «a: hover», и это тоже не сработало.
Что я делаю неправильно? Как я могу получить это так, чтобы позиция наведения была в том же месте?
Мой код:
<div class="contentBottom">
<ul class="featuredIn">
<li class="featured1"><a href="mylink1.html"></a></li>
<li class="featured2"><a href="mylink2.html"></a></li>
<li class="featured3"><a href="mylink3.html"></a></li>
</ul>
</div>
li.featured1 {
background: url(featured_in/1.png) no-repeat;
text-indent:-9999px;
width: 83px;
height: 43px;
}
li.featured1:hover {
background: url(featured_in/1_hover.png) no-repeat;
}
li.featured2 {
background: url(featured_in/2.png) no-repeat;
width: 203px;
height: 42px;
text-indent:-9999px;
}
li.featured2:hover {
background: url(featured_in/2_hover.png) no-repeat;
}
li.featured3 {
background: url(featured_in/3.png) no-repeat;
width: 143px;
height: 21px;
text-indent:-9999px;
}
li.featured3:hover {
background: url(featured_in/3_hover.png) no-repeat;
}
