0

現在、複数の ID を使用し、結果的にそれぞれの CSS プロパティを使用して、これを機能させています。自動にした方がいいと思います。すべてのリンクはブロックとして表示され、タイル状の外観を作成するために互いに並べて表示されます。例えば：

<a href="#" id="spacetile1">Link 1</a>
<a href="#" id="spacetile2">Link 2</a>
<a href="#" id="spacetile3">Link 3</a>
<a href="#" id="spacetile4">Link 4</a>

#spacetile1 {
background-color:#FFF;}

#spacetile1:hover {
background-color:#000;} .... so on and so forth for all spacetiles

私が探しているのは、いくつかの if ステートメントを使用して、デフォルトの背景色の属性に基づいてホバーの色を変更し、対応するブランドの色を検索する時間と精度を節約することです。

if .spacetile(background-color) === #FFF
then .spacetile:hover(background-color) = #000

一定量の色に対してそれを行いたいので、特定のタイルにしたい背景色をコーディングするだけで、ホバー背景はスクリプトで処理されます。

getElementById を調べましたが、1 つのクラスではなく複数の ID を使用していて、getElementsByClassName について読んだことはすべて、クロスブラウザーがサポートされていないことを示しています。

シンプルさと効率性について何か提案があるかどうか疑問に思っていました。

ありがとう！

4

3 に答える 3

2

共通のクラスで。

<a href="#" id="spacetile1" class="space">Link 1</a>
<a href="#" id="spacetile2" class="space">Link 2</a>
<a href="#" id="spacetile3" class="space">Link 3</a>
<a href="#" id="spacetile4" class="space">Link 4</a>

JQuery の使用- JQuery マウス イベント

$(".space").mouseover(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});

$(".space").mouseout(function(){

      if($(this).css('background-color')=='#FFF000')
      {
          $(this).css('background-color','#000FFF');
      }
      //else if else if and so on...
});
于 2013-02-04T19:56:53.593 に答える
2

CSS クラスを使用しない理由:

<a href="#" id="spacetile1" class="spacetile">...</a>
<a href="#" id="spacetile2" class="spacetile">...</a>

<style>
.spacetile { background-color: #FFF; }
.spacetile:hover { background-color: #000; }
</style>
于 2013-02-04T19:50:22.237 に答える
0

質問は誤った仮定に基づいています。getElementsByClassNameを除くすべてのクロスブラウザですIE<=8。http://caniuse.com/#feat=getelementsbyclassnameを参照してください(サポートする必要がある場合はIE<=8、以下のように偽造できます)。 

function compatGetElementsByClassName(class, tag) {
  if (document.getElementsByClassName) {
    //Use native version
    return document.getElementsByClassName(class);
  } else {
    //Fake it
    i = 0;
    subset = (typeof tag !== 'undefined')?document.getElementsByTagName(tag):document.all;
    while (element = subset[i++]) {
      if (element.className == class) {
        //your code here
      }
    }
  }
}

クラス名と（オプションで）タグ名（この場合は「a」）を入力するだけです。タグ名を指定しないと、document.all非常に非効率的なデフォルトになります。

于 2013-02-04T20:20:35.853 に答える