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，这样只修改背景图片，而不修改其他设置。