0

私は、ナビゲーション内のすべてがホバーされている要素以外が0.3の不透明度でフェードアウトする、フェードナビゲーションシステムを実現しようとしています。

同時に、クリックされた要素 (またはこの場合はアクティブなサブページ) がフェードアウトしないように、クリックの「値」を大きくしたいと考えています。私が持っているコードを投稿するだけです。

    <nav id="main">
        <ul>
            <li>
                <a>work</a>
            </li>
            <li>
                <a>about me</a>
            </li>
            <li>
                <a>contact</a>
            </li>           
        </ul>
    </nav>

そして、それを輝かせるスクリプト：

var nava = "nav#main ul li a";

$(nava).hover(function(){
    $(nava).not(this).removeClass().addClass("inactive");
    $(this).addClass("active");
});

$(nava).click(function(){
    $(this).removeClass().addClass("active");
});

});

そしてクラス/ css(less):

.inactive{color:@color2; border-bottom:0 solid #000;}

.active{color:@color1; border-bottom:1px ソリッド #000;}

nav#main ul li a{color:@color1;}

基本的に、ホバー状態はクリックよりも優先されますが、これは発生したくありません。

理想的には、すべてのアンカー要素を保持している順序付けられていないリストからマウスオーバーすると、すべてのアンカー要素が元の状態に戻るようにしたいと考えています。誰かがこれについていくつかの指針を持っているなら、それは大歓迎です。乾杯！

編集: Christian Varga への返信 - ご指摘の点はわかりますが、私がやろうとしていることは次のとおりです。

デフォルトの状態: 不透明度 1

ホバー状態: 不透明度 0.3 (ホバーされた要素を除くすべての要素で、ホバーされた要素は不透明度 1 のままです)

Clicked(Active) State : Opacity 1 (他のリンクがクリックされた要素の前述の不透明度をオーバーライドしない場合)。

Mouseout (コンテナから) : リンクがクリックされていない (アクティブな) 場合を除いて、すべての不透明度 1 です。

元の説明をお詫びします。

4

2 に答える 2

0

ホバーを jQuery にバインドするのはなぜですか? それがCSSの目的です:)。代わりに次のようにしてみてください。

js:

var nava = 'nav#main ul li a';

$(nava).click(function() {
    $(nava).removeClass('active')
    $(this).addClass('active');
});

CSS:

nav#main ul li a{color:#00ff00;}
nav#main ul li a:hover{color:#00ff00; border-bottom:1px solid #000;}
nav#main ul li a.active{color:#ff0000; border-bottom:0 solid #000;}

jsFiddle: http://jsfiddle.net/Z2KMB/

そして、不透明度が変更されたjsFiddle: http://jsfiddle.net/Z2KMB/1/

于 2012-06-19T03:13:46.933 に答える
0

mouseout と mouseover を使用して、必要なアイテムのクラスを設定して、ケースで何をしたいのかを指定します。

例：

$("div.class").mouseout(function(){
      $("#control_name").removeClass("class_name");
    }).mouseover(function(){
      $("#control_name").addClass("other_class_name");
    });

明らかに、id のクラス名や型などに基づいて名前を付ける方法を知っています。上記は単なる例です。

于 2012-06-19T03:15:18.613 に答える