javascript - 将鼠标悬停在表格行上

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