tr onmouse 事件答案

【问题标题】：tr onmouse eventstr onmouse 事件
【发布时间】：2012-06-15 16:41:23
【问题描述】：

我希望能够将鼠标悬停在一行上并突出显示所有内容，但由于某些单元格具有不同的背景，因此下面的代码存在问题。

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

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

如何将其更改为：

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

【问题讨论】：

我认为只添加和删除一个类而不是存储和检索特定样式会更容易。

标签： javascript html onmouseover onmouseout

【解决方案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; }

【讨论】：

没有按预期工作，因为当我将鼠标悬停在不止一个上时，所有行都以黄色突出显示以及如何为整行 onlick 设置 TR bgcolor？
我想它不会工作，因为该表嵌套在另一个表的 td 中
不，如果您更改 CSS 规则以仅针对您想要突出显示的一个表格，它将起作用。让规则更具体。对于 onclick 添加在行上设置类的 JavaScript。

【解决方案2】：

即使我同意用 css hover 更好，我也喜欢回答这个问题，如何用 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/

【讨论】：