0

シーンを設定するためだけに、jQuery（Webデザインではない）に関しては経験が浅いので、ここでいくつかの支援に感謝します！

基本的に、ナビゲーションバーのホバー状態をフェードイン（ホバー上）およびフェードアウト（マウスオフ）にしようとしています。これは単純なナビゲーションバーであり、画像はありません。jQueryが実際にCSSを正常に取得できるように、疑似セレクターがクラスとして2倍になっています。

いくつかのスクリプトを試しましたが、探しているものが見つからないようです。コードは単純で、解決策は単純ですが、私はまったく運がないので、ここに行きます。

HTML：

<ul>
    <li><a class = "tab selected" href = "index.html">home</a></li>
    <li><a class = "tab" href = "portfolio.html">portfolio</a></li>
    <li><a class = "tab" href = "index.html">contact</a></li>
</ul>

CSS：

nav ul li a.tab { 
    display: inline-block; 
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    padding: 15px 20px; 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    padding: 15px 20px; 
    background-color: #d5d1bc; 
}

nav ul li a.tab:active, nav ul li a.tab.active { color: #901f78; }

jQuery：

$('.tab.hover').hover(
    function(){
        $(this).fadeIn();
    }, 
    function(){
        $(this).fadeOut();
    }        
);

マウスオーバー/マウスアウト機能も使用しようとしましたが、うまくいきませんでした。ブラウザでまったく変更がありません。私のjQueryファイルも適切に接続されています。

オリジナルではない投稿ですが、2日間の調査の結果、アイデアがなくなったので、よろしくお願いします。

4

2 に答える 2

2

これはCSS3で実行できます。

tab次のCSSをクラスに配置することで、アイテムのバックグラウンド遷移を簡単に出し入れできるように設定します。

transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;

2番目のパラメーターの値を変更することでフェードタイムを変更できます（.5sは0.5秒です）

実例：http：//jsfiddle.net/BGKyp/1/

于 2012-09-22T23:48:41.773 に答える
0

次のようなことを試してください：

$(function(){
  $('.tab').parent().hover(
    function(){
        //$(this).find('.tab').stop().fadeIn();
        $(this).find('.tab').stop().fadeTo("fast",1);
    }, 
    function(){
        //$(this).find('.tab').stop().fadeOut(); //this sets display to 'none'; so we cant have hover events again; switch to 'fadeTo()' instead
        $(this).find('.tab').stop().fadeTo("fast",0.01);        
    }        
  );  
});

そしてCSSは以下のとおりです：（私はあなた<ul>が a の中にあると仮定しています<nav>）

nav ul li{
    height: 40px;
}
nav ul li a.tab {  
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    background-color: #d5d1bc; 
}
于 2012-09-23T00:04:35.303 に答える