鼠标悬停时的 CSS 过渡答案

【问题标题】：css transition on mouseover鼠标悬停时的 CSS 过渡
【发布时间】：2012-08-30 07:13:13
【问题描述】：

我的横幅中的下拉菜单有以下 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');
    });

});

非常感谢您的任何建议。

【问题讨论】：

我认为这篇文章是解决您问题的正确方法，stackoverflow.com/questions/2983957/…>
CSS3 可能足以满足您的需求。见w3.org/TR/css3-transitions 或w3schools.com/css3/css3_transitions.asp
使用 css 代替 javascript..stackoverflow.com/questions/7924038/css3-transition-not-working/…
感谢 css3 过渡似乎是个好主意

标签： javascript jquery css

【解决方案1】：

引用此post，

块引用我想你必须通过不使用真正的背景图像来解决这个问题，而是使用包含图像的 div 元素，使用 position: absolute （或固定）和 z-index 进行堆叠。然后，您将为这些 div 设置动画。块引用

【讨论】：

感谢您的建议，我选择 css3 动画 :)

【解决方案2】：

我通过删除变量名中$ 之后的j 来实现此功能。

小提琴：http://jsfiddle.net/XjxBj/

$(document).ready(function () {
    //When mouse rolls over
    $("#nav-menu li").hover(function () {
        $(this).filter(':not(:animated)').animate({
            marginLeft: '9px'
        }, 'slow');
    },

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

【讨论】：