Change Table Border Color On Hover using jQuery

Here'a a very simple way to change the Table/Grid/GridView Border Color on Hover. This assumes that your control renders the <table> tag

<html xmlns="">

<head runat="server">

    <title>Border Color on Hover</title>

    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>


 <script type="text/javascript">

     $(document).ready(function() {


      function() {

         $(this).css({ "border": "Solid Brown 1px" });


      function() {

          $(this).css({ "border": "" });






    <form id="form1" runat="server">                 

        <table id="tblOuter" class="someClass" style="width:50%">


            <td>Row 0, Column 0</td>

            <td>Row 0, Column 1</td>

            <td>Row 0, Column 2</td>



            <td>Row 1, Column 0</td>

            <td>Row 1, Column 1</td>

            <td>Row 1, Column 2</td>



            <td>Row 2, Column 0</td>

            <td>Row 2, Column 1</td>

            <td>Row 2, Column 2</td>






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

1 comment:

Anonymous said...

Garbage. This can be done in pure CSS.