Question

我希望能够悬停在一行并突出显示所有内容，但我遇到了下面代码的问题，因为某些单元格具有不同的背景。

 <tr style="" onmouseover="this.style.background='Red';" onmouseout="this.style.background='#595959'" >

没关系，所有单元格都具有相同的背景但是如果我单击一个单元格会突出显示它，onmouseout="this.style.background='#595959'"将始终重置它。

如何将其更改为：

onmouseout="this.style.background='currentCellBGColor"

Answer 1

可以使用纯CSS解决方案完成。不需要JavaScript

纯CSS解决方案，适用于IE8 +所有其他现代浏览器

tr:hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected { background-color: lime; }

Fiddle

如果您需要IE7，则需要将一个类onmosueover添加到表行并删除类onmouseout。

tr:hover td, tr.hover td { background-color:yellow }
td.selected { background-color: green; }
tr:hover td.selected, tr.hover td.selected { background-color: lime; }

Answer 2

即使我同意用css悬停更好，我也想回答这个问题，如何用javascript来做。

您可以将其保存在一个属性上，并使用它将其还原为：

<script>
function setBackground(me, color)
{
   me.setAttribute("data-oldback", me.style.background);       
   me.style.background=color;
}

function restoreBackground(me)
{
    me.style.background = me.getAttribute("data-oldback");
}    
</script>

和

  <tr onmouseover="setBackground(this, 'Red');" 
   onmouseout="restoreBackground(this);" 
     style="background:blue;" >

和测试：http://jsfiddle.net/AdDgS/3/和此http://jsfiddle.net/AdDgS/4/

tr onmouse活动

2 个答案: