日期:2014-05-16  浏览次数:20757 次

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