2012-03-09 42 views
0

我有一個在ascx-Control中有一些行的表。在ascx中懸停表

我如何添加懸停效果對於行改變的backgroundColor或字體顏色,...

謝謝

回答

4

沒有JavaScript/jQuery的你可以用純CSS ...

<head> 
     <title></title> 
     <style> 
      .changecolor:hover 
      { 
       background-color: Blue; 
       color: Red; 
      } 
     </style> 
    </head> 
    <body> 
     <table> 
      <tr class="changecolor"> 
       <td> 
        Hello 
       </td> 
      </tr> 
     </table> 
</body> 
+0

+1簡單的方法 – Fabio 2012-03-09 22:46:10

+0

+1爲簡單起見。無需在這方面涉及jquery。 – Andrew 2012-03-09 23:29:48

+0

從我身邊+1 – Pankaj 2012-03-10 00:52:58

2

您可以使用jQuery。這裏是Stackoverflow的另一個問題,告訴你如何去做。

Add background color and border to table row on hover using jquery

但在這裏我把一個完整的例子。所有你需要的是適應它在ASP.NET用戶控件中呈現。

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script> 
     $(function() { 
      $('tr').hover(function() { 
       $(this).css('background-color', '#33CCFF'); 
      }, 
     function() { 
      $(this).css('background-color', '#FFFFFF'); 
     }); 
     }); 
    </script> 
    <table border="1"> 
     <tr> 
      <td> 
       Hello world 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Goodbye world 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 

所有的工作都在客戶端完成。

1
$("tr").hover(
    function() { 
    $(this).css("background","Color"); 
    }, 
function() { 
    $(this).css("background",""); 
    } 

);

2

你只能用CSS創建一個類的行像這樣做,也是下面

.tableRowStyle 
    { 
     color: #fff; 
     /* whatever style you want*/ 
    } 

    .tableRowStyle a:hover 
    { 
     color: #0000ff; 
     /* whatever style you want on hover */ 
    }