鼠标悬停时的css转换

css transition on mouseover

本文关键字：css 转换 悬停 鼠标      更新时间：2023-09-26

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

非常感谢你的建议。

这篇文章中的一句话，

区块报价我想你必须解决这个问题，不使用真正的背景图像，而是使用包含图像的div元素，使用position:absolute（或fixed）和z-index进行堆叠。然后，您可以设置这些div的动画。区块报价

我通过删除变量名中$之后的j来实现这一点。

Fiddle：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');
    });
});​
相关文章：