메이크업 테이블 행 클릭 + 호버 변경 배경

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

, 당신이 준비가 두 번째 문서에 마감 });를 놓치고있는 것으로 나타났습니다 매니저. 다음을 시도하십시오. 공지 사항 하나의 준비된 핸들러를 사용하고 jQuery 기능을 동일한 선택자에 연결합니다. jQuery의 장점 중 일부입니다.

$<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> 

@Chris Pietschmann은 CSS를 사용하면 관리 할 코드가 줄어들어 동일한 효과를 얻을 수 있습니다.

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

Answer 2

당신은 호버에 다른 배경 색상을 정의하는 CSS를 사용할 수 있습니다 질문에 귀하의 코멘트에서 코드를 추가 한 후

tr:hover 
{ 
    background: red; 
}