テーブルの行をクリック可能にする+ホバーを変更する背景

Question

私はMVCアプリケーションを持っていて、テーブルの行をクリック可能にしたいと思って、その上にカーソルを置くと、その背景を変更したい。

I持って、私は私がホバー機能を追加したい

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example tbody tr').click(function() { 
      alert('row was clicked'); 
     }); 
    });  

</script> 

ブログからもらったので、私はそれを変更し、次のコード：

$<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example tbody tr').click(function() { 
      alert('row was clicked'); 
     }); 
    }); 

    $(document).ready(function() { 
     $('#example tbody tr').hover(function() { 
      $(this).css('background-color','#ccc'); 
     }, function() { 
      $(this).css('background-color','#fff'); 
    }); 
</script> 

私のHTML：

<table id="example" border = "2"> 
    <thead> 
    <tr style="border-style:solid" class="simplehighlight"> 
     <th> 
      Name 
     </th> 
     <th> 
      Description 
     </th> 
     <th> 
      tblStatu 
     </th> 
     <th> 
      DueDate 
     </th> 
     <th> 
      AssignedTo 
     </th> 
     <th> 
      CreatedOn 
     </th> 
     <th> 
      CreatedBy 
     </th> 
     <th> 
      ModifiedOn 
     </th> 
     <th> 
      ModifiedBy 
     </th> 
     <th></th> 
    </tr> 
    </thead> 


    <tbody> 
@foreach (var item in Model) 
{ 
    <tr style="border-style:solid"> 
     <td style="border-style:solid"> 
      @item.Name 

      @*@Html.DisplayFor(modelItem => item.Name)*@ 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.Description) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.tblStatu.Name) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.DueDate) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.AssignedTo) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.CreatedOn) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.CreatedBy) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ModifiedOn) 
     </td> 
     <td> 
      @Html.DisplayFor(modelItem => item.ModifiedBy) 
     </td> 
     <td> 
      @Html.ActionLink("Edit", "Edit", new { id = item.TaskId }) | 
      @Html.ActionLink("Details", "Details", new { id = item.TaskId }) | 
      @Html.ActionLink("Delete", "Delete", new { id = item.TaskId }) 
     </td> 
    </tr> 
} 
    </tbody> 

クリックハンドラは機能しますが、ホバーオーバー機能は機能しません。何が問題なの？

Answer 1

質問にあなたのコメントからコードを追加した後、私はあなたの2番目の文書準備に決算});を逃していることに気づきましたハンドラ。以下を試してください。通知私は、1つの準備ハンドラを使用していて、同じセレクタにjQuery関数を連鎖させています。これはjQueryの美しさの一部です。 @クリスPietschmannノートとして

$<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example tbody tr').click(function() { 
      alert('row was clicked'); 
     }).hover(function() { 
       $(this).css('background-color','#ccc'); 
      }, function() { 
       $(this).css('background-color','#fff'); 
     }); 
    }); 
</script> 

、しかし、あなたはあなたに維持するために以下のコードを与えるCSSと同じ効果を得ることができます。

<style> 
#example tbody tr:hover 
{ 
    background-color: #ccc; 
} 
</style> 

Answer 2

あなたはホバー上の異なる背景色を定義するためにCSSを使用することができます。

tr:hover 
{ 
    background: red; 
}