jquery - 将鼠标悬停在特定类别的 FadeOut

Question

我正在开发一个导航栏，上面有一个图像并且那里有链接。当用户悬停这些链接时，它会将背景更改为导航栏悬停图像，并通过 CSS 的 background-position 属性指定其位置。现在我想让我网站上的所有链接淡出显示 .CLASS:hover 图像，并使用 jQuery 插件慢慢地显示。我的代码是:

HTML:

<div class="navbar"><!-- NavBar Start -->
        <a href="#" class="nav_l_home" title="Home"></a>
        <a href="#" class="nav_l_services" title="Services"></a>
</div><!-- NavBar End -->

CSS:

.navbar {
    background:url(../img/nav.png) no-repeat;
    width:828px;
    height:72px;
    margin:auto;
    position:relative;
}
a.nav_l_home {
    width:112px;
    height:43px;
    position:absolute;
    bottom:14px;
    right:30px;
}
a.nav_l_home:hover {
    background:url(../img/nav_hov.png) no-repeat;
    background-position: -686px -15px;
}
a.nav_l_services {
    width:107px;
    height:43px;
    position:absolute;
    bottom:14px;
    right:161px;
}
a.nav_l_services:hover {
    background:url(../img/nav_hov.png) no-repeat;
    background-position: -560px -15px;
}

抱歉，我的解释很差 ^-^".. 我只想让 a.nav_l_home:hover 背景在鼠标悬停时淡入，就是这样 ^^

Answer 1

如果你想让一个元素在鼠标悬停/鼠标移出时淡入淡出，你可以这样做:

$('.foo').hover(

    function() {
        $('#bar').fadeIn();
    },

    function () {
        $('#bar').fadeOut();
    }

);

.hover() 有两个参数:鼠标悬停时调用的函数和鼠标移出时调用的函数。方法 .fadeIn() 和 .fadeOut() 是不言自明的。您可以通过将毫秒数(整数)作为参数传递来调整淡入淡出效果的持续时间。