css中a:hover更换背景图片的有关问题

css中a:hover更换背景图片的问题
本来菜单鼠标经过更换背景图片都是 onmouseover 和 onmouseout 控制
也很久没写过东西了，这天要做个网站，看到都是用 div+css的，多年前我可都用Table排版的亚。
看到一个案例，鼠标经过更换背景图片的案例，感觉不错，试了一下，发现貌似有点弊端，发上来请教一下大家，看看什么问题。

.menu_btn
{
    display:block;
    width:150px;
    height:60px;
    background:url("images/menu.png");/* menu.png 以及下面的 menuX.png 都是 150*60的 */
}
.menu_btn:hover
{
    background-position: 0 -60px;
}

<ul>
    <li>
        <a class="menu_btn" style="background:url('images/menu1.png')" href="#">1</a>
    </li>
    <li>
        <a class="menu_btn" style="background:url('images/menu2.png')" href="#">2</a>
    </li>
    <li>
        <a class="menu_btn" style="background:url('images/menu3.png')" href="#">3</a>
    </li>
    <li>
        <a href="#" class="menu_btn">4</a>
    </li>
</ul>

程序中1、2、3当鼠标经过都不能变化背景，4可以正常变化背景。
求解答为什么会这样，有什么好的方法可以实现都可以正常变化背景的。
注： .menu_btn 中本来是没有 background:url("images/menu.png"); 发现不行，为了调试，才在加入 4 的时候加进这一句的。
[解决办法]
如4楼所说，样式优先级问题，background是简写形式，包含背景设置的所有信息，如本例本只想修改图片，却把其他的设置也覆盖掉了，可以将内联样式里的background属性换成background-image，这样只修改背景图片，而不修改其他设置。

查看更多 下一篇