0

我正在开发一个导航栏，上面有一个图像并且那里有链接。当用户悬停这些链接时，它会将背景更改为导航栏悬停的图像，并通过 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 背景在鼠标悬停时淡入，仅此而已 ^^

4

1 回答 1

0

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

$('.foo').hover(

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

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

);

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

于 2013-09-21T05:35:10.850 回答