使用CSS背景图片更改li：hover上li元素的背景

Question

我有一堆li元素，其背景图像在正常状态下工作正常。 当我将悬停类添加到它们在y轴上移动的任一图像上的那一刻，当您将鼠标悬停在特定图像上时，它们会在页面上向下移动25px左右。 我尝试在边距状态以及边距等位置设置“ 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;
}

Answer 1

您是否尝试过像这样将图像添加到背景元素。

background-image: url(featured_in/3.png) no-repeat;

您也可以尝试将''添加到url元素中。

background: url('featured_in/3.png') no-repeat;

我希望这有帮助：）