0

我现在使用多个 ID 和相应的每个 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 的所有内容都说它不支持跨浏览器。

想知道是否有人对简单性和效率有任何建议。

谢谢！

4

3 回答 3

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 回答
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 回答
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 回答