在 li:hover 上更改 li 元素的背景，使用 css 背景图像答案

【问题标题】：Change background of li element on li:hover with a css background image在 li:hover 上更改 li 元素的背景，使用 css 背景图像
【发布时间】：2013-03-05 13:47:07
【问题描述】：

我有一堆带有背景图像的 li 元素在正常状态下工作正常。当您将鼠标悬停在该特定图像上时，我将悬停类添加到它们在 y 轴上移动大约 25px 左右的任何图像的那一刻。我尝试在悬停状态中设置“背景位置：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;
}

【问题讨论】：

请提供一个可以重现问题的在线示例（在您的服务器上，或 jsfiddle 或其他东西上），包括您的实际背景图像（否则我们什么也看不到）。还有这个问题所涉及的浏览器的信息。
找到了解决方案。只是我有一个比正常状态更大的悬停图像。

标签： hover html-lists

【解决方案1】：

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

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

您也可以尝试像这样在 url 元素中添加 ''。

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

我希望这会有所帮助:)

【讨论】：