Onmouseover表行

Question

我有onmouseover事件的脚本，但我不需要包含class="none"。如何仅在class="none"中禁用onmouseover？我设置了`class =“none”的css。

CSS：

.none{
    background-color: transparent;
    border-right: #9dcc7a;
    border-color: transparent;
}

HTML：

<table id="tfhover" cellspacing="0" class="tablesorter" border="1px">
    <thead>
        <tr>
            <th class="none"></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="none"></td>
            <td></td>
        </tr>
    </tbody>
</table>

JS： -

$(function(){
  var tfrow = document.getElementById('tfhover').rows.length;
  var tbRow=[];
  for (var i=1;i<tfrow;i++) {
    tbRow[i]=document.getElementById('tfhover').rows[i];
    tbRow[i].onmouseover = function(){
      this.style.backgroundColor = '#f3f8aa';
    };
    tbRow[i].onmouseout = function() {
      this.style.backgroundColor = 'transparent';
    };
   }
});

Answer 1

你可以用css本身来做。

#tfhover tr td {
    background-color:transparent
}
#tfhover tr:hover td:not(.link) {
  background-color:#f3f8aa;
}

或者

/*#tfhover tr {
    background-color:transparent;
}*/ /*This rule is not needed since default background is transparent*/
#tfhover tr:hover td  {
  background-color:#f3f8aa;
}
#tfhover tr td.link{
    background-color:transparent;
}

<强> Demo

Answer 2

只需使用一些if语句逻辑来确定是否将鼠标悬停事件添加到元素中。

看起来您的第一列始终是一个链接，因此当您运行for循环时，请检查它是否是第一列，如果是，请不要添加mouseover事件。

顺便说一下，在这种情况下你可能需要一个嵌套循环。

Answer 3

这个怎么样？

$(function() {
  $("td").each(function() {
    if($(this).attr("id") != "none") {
      $(this).mouseover(function() {
         $(this).css("background-color","#f3f8aa");
         })
          .mouseout(function() { $(this).css("background-color","transparent"); });
        }
     });
 });