onmouseout does not work! What am I doing wrong?

onmouseout does not work! What am I doing wrong?

  1.    <script>
    $(document).ready(function()
        {
            $(".blue").hover(
                function ()
                    {
                        $(this).addClass("red");
                    },
                function ()
                    {
                        $(this).removeClass("blue");
                    }
                );
        })

    $(document).ready(function()
        {
    $(".red").mouseout(
                function ()
                    {
                        $(this).addClass("blue");
                    },
                function ()
                    {
                        $(this).removeClass("red");
                    }
                );

    })
    </script>

       <style type="text/css">
       .blue { color:#09C; margin:40px}
       .red { color:red; margin:40px}  
       </style>
       <div class="blue">Blue</div>



































    • Topic Participants

    • pmdg3