Add CSS to Ordered and Unordered List using jQuery

I was working on a solution where I had to add CSS to a bunch of <li> inside <ul>. I used jQuery to do in the following manner:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>   
    <style type="text/css">
        .clsLI
        {
            color:Gray;
            cursor:pointer;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>


    <script type="text/javascript">
        $(document).ready(function() {
            $("ul#unord li").hover(
          function() {
              $(this).addClass("clsLI");
          },
          function() {
              $(this).removeClass("clsLI");
          }
         )
        });
    </script>
</head>

<body>
    <form id="form1">
    <div>
    <ul id="unord">
        <li>
            jQuery
        </li>
        <li>
            JavaScript
        </li>
        <li>
            jQuery and JavaScript
        </li>
    </ul>
    </div>
    </form>
</body>
</html>

In the code above, the CSS gets applied when the user hovers the mouse on a <li>. In this example, we hover the mouse over 'JavaScript'. The output is as shown below:


No comments:

Post a Comment