javascript - 鼠标悬停时的CSS过渡

Question

我的横幅中的下拉菜单有以下 CSS:

#nav-menu li a
{
    background-image:url('../images/menu_background.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;
}


#nav-menu li a:hover
{
    background-image:url('../images/menu_background_hover.png');  
    background-repeat:repeat-x;
    background-position: left top;
    height: 35px;

}

它工作正常，除了当我将鼠标悬停在 <li> 上时我想要一些动画效果。标签。目前，它只是替换了 <li> 的背景颜色。当我将鼠标悬停在它上面时。

我尝试了下面的示例代码，它更改了 li 标签的左边距，但我不知道如何在悬停时为 css 过渡设置动画:

$j(document).ready(function () {

    //When mouse rolls over
    $j("#nav-menu li").hover(function () {

        $j(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

    function () {
        $j(this).animate({
            marginLeft: '0px'
        }, 'slow');
    });

});

非常感谢任何建议。

Answer 1

引自此post ,

Blockquote I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs. Blockquote