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() は、マウスオーバー時に呼び出す関数とマウスアウト時に呼び出す関数の 2 つのパラメーターを取ります。メソッド .fadeIn() と .fadeOut() は一目瞭然です。パラメータとしてミリ秒数 (整数) を渡すことにより、フェード効果の持続時間を調整できます。

于 2013-09-21T05:35:10.850 に答える