2

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

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

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

我怎样才能将其更改为：

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

2 回答 2

4

可以使用纯 CSS 解决方案来完成。无需 JavaScript

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

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

小提琴

如果你需要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; }
于 2012-06-15T16:46:24.190 回答
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/

于 2012-06-15T16:47:46.163 回答