使用JavaScript更改多個元素懸停背景顏色？

Question

我現在已經使用多個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，但是我仍然會使用多個ID而不是一個類，並且我所閱讀的有關getElementsByClassName的所有內容都表示不支持跨瀏覽器。

想知道是否有人對簡單性和效率提出任何建議。

謝謝！

Answer 1

具有共同的階級 。

<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...
});

Answer 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>

Answer 3

這個問題是建立在錯誤的假設之上的。 對於IE<=8以外的所有內容， getElementsByClassName是跨瀏覽器的。 請參閱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 ，效率很低。