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 でどうやって作るのかという質問に答えたいと思います。

1 つの属性に保存し、それを使用して次のように復元できます。

<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 に答える