0

コンテナー div (この場合は #header) の不透明度が 0.5 の場合、リンクのリストで CSS ホバー アクションをオーバーライドしたいと考えています。私は苦労しています。

これが私のjQueryです：

  jQuery(window).scroll(function() {
    if(jQuery(window).scrollTop() > 200) {
        jQuery("#header").css('opacity', '0.5');
    } else {
        jQuery("#header").css('opacity','1');
    }
  });

  if(jQuery("#header").css("opacity") != 1){
      jQuery("#nav li a").hover(function(){
        jQuery(this).css("color","rgba(63, 131, 202, 1)");
      });
  }

そして、ここに私のCSSがあります:

#nav li a {
    color:rgba(63, 131, 202, 1);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#nav li a:hover {
    color:rgba(63, 131, 202, 0.7);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

また、jQuery で各トランジションをなしでオーバーライドしようとしましたが、うまくいきません。どうすればこれを行うことができますか? 不透明度が 1 でない場合に試して、非ホバー属性をすべてオーバーライドしてから、上記のようにホバー属性をオーバーライドする必要がありますか? 何をすべきかわからない。

4

3 に答える 3

1

CSS にできるだけ多くのスタイルを保持し、変更が必要な要素 (または、いくつかの要素を変更する場合classは、階層の上位の要素) を単純に変更することをお勧めします。body次に例を示します。

Javascript:

jQuery(window).scroll(function() {
    jQuery(document.body).toggleClass("scrolledDown", jQuery(window).scrollTop() > 200)
});

CSS

#nav li a {
    color:rgba(63, 131, 202, 1);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#nav li a:hover {
    color:rgba(63, 131, 202, 0.7);
    transition: color 1s;
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    -moz-transition: color 1s;
}

#header {
    opacity: 1;
}

body.scrolledDown #header {
    opacity: 0.5;
}

body.scrolledDown #nav li a:hover {
    color: rgba(63, 131, 202, 1);
}

これにより、状態が自動的に管理され、スタイルと JavaScript が分離されます。これは常に優れています。要素に を追加する必要はありませんが、単純な例と DOM 構造の残りの部分に関する知識が不足しているため、ここでは追加しclassました。body

于 2013-01-22T03:10:04.413 に答える
1

回避策として、次の方法でより多くの成功を収めることができます。

jQuery("#header").fadeTo(0, 0.5);

それ以外の：

jQuery("#header").css('opacity', '0.5');
于 2013-01-22T03:06:09.293 に答える
1

このような場合、デバッガーでコードをステップ実行すると便利です。この特定のシナリオでは、数値の css プロパティをクエリしている場合でも jQuery.fn.css() が文字列を返すことがわかるため、結果を parseFloat() する必要があります。

if(parseFloat(jQuery("#header").css("opacity")) != 1)

そうは言っても、スタイル プロパティに対するクエリを完全に放棄し、代わりにクラスを使用して状態を管理することを強くお勧めします。プレゼンテーションは情報ではありません！おまけとして、リンク ホバーは、javascript を使用したホバーではなく、クラス名に基づく CSS ベースのオーバーライドにすることができます。

于 2013-01-22T03:06:29.350 に答える