Question

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

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;
}

mmm sory for the poor explonation ^ - ^＆＃34; ..我想要的只是制作a.nav_l_home：悬停背景以淡入鼠标悬停所有^^

Answer 1

如果您希望在鼠标悬停/鼠标移出时使元素淡入淡出，则可以执行以下操作：

$('.foo').hover(

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

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

);

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

悬浮FadeOut为某些类

1 个答案: