我有一堆li元素,背景图像在正常状态下正常工作。当我将鼠标悬停在特定图像上时,我将悬停类添加到它们在y轴上移动的任何一个图像的大约25px左右。我尝试在悬停状态下设置“background-position:0 0”以及margin等,但都没有工作。我也尝试更改元素,因此它使用“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;
}
答案 0 :(得分:0)
您是否尝试过将图像添加到背景元素中。
background-image: url(featured_in/3.png) no-repeat;
你也可以尝试像这样添加''到url元素。
background: url('featured_in/3.png') no-repeat;
我希望这会有所帮助:)