3

9 つの異なる状態を持つ 1 つの画像と、さまざまな状態を表示するクラスとして設定された適切な background-position ルールがあります。:hover 疑似セレクターは使用できません。変更される背景画像は、ホバーされている要素と同じではないためです。私はこのようにクラスを定義しました：

#chooser_nav {width:580px; height:38px; background:transparent url(/assets/images/chooser-tabs.jpg) 0 0 no-repeat; margin-left:34px;}
#chooser_nav.feat {background-position:0 0;}
#chooser_nav.inv {background-position:0 -114px;}
#chooser_nav.bts {background-position:0 -228px;}
#chooser_nav.featinv {background-position:0 -38px;}
#chooser_nav.featbts {background-position:0 -76px;}
#chooser_nav.invfeat {background-position:0 -152px;}
#chooser_nav.invbts {background-position:0 -190px;}
#chooser_nav.btsfeat {background-position:0 -266px;}
#chooser_nav.btsinv {background-position:0 -304px;}

次に、jQuery を使用して、前のクリック イベントに基づく一連のホバー ルールを作成します (ここでは宣言されていない "cur" 変数は別の場所で適切に宣言されています)。

  $("#featured_races a").hover(function(){
    cur == "feat" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"feat");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#invitational_races a").hover(function(){
    cur == "inv" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"inv");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

  $("#behind_the_scenes a").hover(function(){
    cur == "bts" ? $("#chooser_nav").attr("class", cur) : $("#chooser_nav").attr("class", cur+"bts");
  }, function(){
    $("#chooser_nav").attr("class", cur);
  });

したがって、Moz および WebKit ブラウザーでは、これは正常に機能します。クラスが適用され、それに応じて背景画像が変更されます。IE7 でも動作します。ただし、IE6 では、背景画像は変更されません。クラスは適切に適用されます。MS の Web 開発ツールの DOM ビューアーでこれを確認しました。したがって、jQueryは機能しています。クラスは適用されていますが、目に見える変化はありません。

私はここでちょっと困惑しています...助けてください、クラックオーバーフロー...あなたは私の唯一の希望です...

編集: className と setAttribute に関する限り... クラスが変更されています。attr("class", cur) は機能しています。ただし、クラスが変更されると、結果のルールは視覚的に適用されません...しかし、クラスの変更が発生しています。

編集 2: jQuery のクラス固有のメソッドについて: 私は元々コードにそれらを持っていましたが、結果は同じでした。繰り返しますが、問題はクラスが要素に適用されないことではありません...これは発生していることが確認されています。クラスが要素上にあると、何らかの理由で、要素がそのクラスに設定された CSS ルールに従っていないということです...

4

5 に答える 5

2

推測 1: レンダリングのバグ 1

要素で hasLayout をトリガーしたことを確認してください。高さを指定することでこれを行うことができますが、それが不可能な場合は、position = relative & z-index = 1 も hasLayout をトリガーします。これらの要素 + 疑わしい親要素に対して試してください。

/* fix hasLayout bug for IE */
div#id {
  _height : 0;
  min-height : 0;
}

推測 2: レンダリングのバグ 2

ブラウザが決定した以上のレンダリング計算を強制する必要がある場合があります。body クラスに触れることで、DOM に良い刺激を与えることができます。

document.body.className += '';

推測 3: セレクターの問題

IE6 は複数のクラス セレクターをサポートしておらず、場合によっては ID+Class をサポートしている可能性もあります。

div.class1.class2 {
  border : 1px solid red; /* this will normally not work in IE6 */
}

私は現時点でテストする IE を持っておらず、#id.class が動作するはずの天気を思い出せません (動作するはずだと思います) が、通常、IE6 ではそのようなことは避けています。セレクターを変更する必要がある場合があります。

セレクターがまったく機能しているかどうかを確認するには、テストをセットアップする必要があります。

動作する可能性のあるバリエーション:

.inv#chooser_nav { background-position : 0 -114px; }

または、親によって要素を選択する必要がある場合があります。

#someparent .inv { background-position : 0 -114px; }

IE6 にはさらにホバーの問題があるため、それも要因である可能性があります。

お役に立てれば。申し訳ありませんが、これ以上明確にすることはできませんが、IE6 の癖を乗り越えるには、古き良き試行錯誤、力ずく、推測、そして寛大な忍耐力の助けが必要です。

于 2008-10-18T15:19:10.027 に答える
1

IE6 では、使用している「ダブル」CSS ルールに問題があります。

#chooser_nav.bts {background-position:0 -228px;}

chooser_nav IDとclassを持つ要素を選択していますbts。この (非常に便利な) コンストラクトは、IE6 では信頼できません。ID 指定子を削除するか、代わりに親要素をターゲットにすることができれば、問題は解決するはずです。

.bts {background-position:0 -228px;}

また

#chooser_nav_parent .bts {background-position:0 -228px;}
于 2009-03-04T13:52:51.967 に答える
0

classNameDOM プロパティを使用します。setAttribute()IE < 8 では完全に壊れています。

于 2008-10-17T18:11:39.103 に答える
0

同様の問題に遭遇しました。クラス名が適用され、テキスト コロットが期待どおりに変更されましたが、背景画像はすぐには更新されませんでした。実際の要素の上または外にカーソルを置いた後、背景が更新されました。

DD_belatedPNG ライブラリとの競合であることが判明しました。

于 2009-03-04T13:48:11.307 に答える
0

私はie7でこの問題を抱えていました。

基本的に、親要素のクラスを変更して、一部の要素を非表示にし、他の要素を表示していました。クラスが変更され、ページがロードされたときに表示されていた要素は非表示になり、正常に表示されましたが、ページがロードされたときに表示されていなかった要素は表示されませんでした。

これはいくつかのシナリオでのみ発生することに気付きました (神のみぞ知る)。

私の解決策は、ページがJavaScriptでロードされた後にのみ要素を非表示にすることでした.

于 2009-09-22T07:20:03.000 に答える