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

[pcuser]

本来菜单鼠标经过更换背景图片都是 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 的时候加进这一句的。

[easesu]

如4楼所说，样式优先级问题，background是简写形式，包含背景设置的所有信息，如本例本只想修改图片，却把其他的设置也覆盖掉了，可以将内联样式里的background属性换成background-image，这样只修改背景图片，而不修改其他设置。

[萧萧可乐]

.menu_btn
{
    display:block;
    width:150px;
    height:60px;
    background:url("images/menu.png");/* menu.png 以及下面的 menuX.png 都是 150*60的 */
    background-position: 0 0; /* 这个加上试试  一般不加也可以吧 */
}
.menu_btn:hover
{
    background-position: 0 -60px;
}

还有 看看是不是你的图片有问题。。。

[pcuser]

回复楼上，图片没有问题，同一个图片试过的了。 另，是 hover 的时候没有变化背景。

[_MyPrecious]

123 不是 有style背景吗，去了不就有了吗

[乌哩码嗏]

样式优先级问题啊~a标签style优先级高于.menu_btn:hover的定义，因此会覆盖掉

[乌哩码嗏]

引用 4 楼 zqaq_520 的回复:

样式优先级问题啊~a标签style优先级高于.menu_btn:hover的定义，因此会覆盖掉

建议楼主试试，不要将图片定义为背景，而是作为img图片， 然后定义一个“oriPic”的img图片样式<img class="oriPic" src=""> 以及一个“covPic”的img图片样式<img class="covPic" src=""> 再来定义.menu_btn:hover .oriPic的 display: none; .menu_btn:hover .covPic的 display:block; 外加position来定义图片位置 仅做参考，未试过！