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="http://www.w3.org/1999/xhtml">

<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() {

         $(".someClass").hover(

      function() {

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

      },

      function() {

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

      });

     });

 </script>    

</head>

<body>

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

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

        <tr>   

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

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

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

        </tr>

        <tr>   

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

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

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

        </tr>

        <tr>   

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

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

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

        </tr>

       </table>

    </form>

</body>

</html>

About The Author

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.

Change Table Border Color On Hover using jQuery

About The Author

1 comment:

Labels