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>


1 comment: