Isuue with .hover and transparency

Isuue with .hover and transparency

Hi Guys,

I have just completing a site "sussexwebmasters.co.nf".
However, among other things l have an issue with the menu with regards to hovering and transparency.
Here it is:
When the site first loads, everything is fine,
When you click in a menu item or hover over it, the background color becomes opaque, which is what l intend, but after that the initial click there are a few issue with the subsequent events:

1) When you hover over a previously clicked link, the background effects no longer work i.e. becoming opaque
2)The color of the background slightly changes after the initial click.

Please have a look at the site and let me know.

Apologies in advance, this is still work in progress so the code is a bit messy.

  1. <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    </head>
    <style>


    .hoverMe{
        
    background-color:#4F9AC2;
        
    opacity:1;
    }


    .para1, .para2{
        
    display:block;
        
    float:right;
    }


    #test{
        
    display:inline-block;
        
    }


    </style>


    <body>


    <div id="test">
        
    <p ><a class="para1">This is a test: The color should animate:<br>
        When you hover over me, my color should be lightblue(#4F9AC2) everytime.
        When you click any other links, my color should change the the darker shade

    </a></p><br><br>
        
    <p ><a class="para2">This is a test: The color should animate:<br>
        When you hover overme, my color should be light blue(#4F9AC2) everytime.
        When you click any other links, my color should change the the darker shade
        


    </a></p>
    </div>


    <script src="scripts/jquery-1.8.2.min.js"></script>
    <script src="scripts/jquery.color.js"></script>
    <script>


    $


    (document).ready(function(e) {

    $

    ('#test a').click(function(e) {

        $

    (this).stop().animate({ backgroundColor: "transparent"}, 1000);},
        
    function() {
            $
    (this).stop().animate({ backgroundColor: "#A543A9" }, 1000);
            $
    (this).animate({width:'105%'});
            $
    (this).animate({width:'100%'},
                        
    function(){$(this).css('background-color','#4F9AC2').end().css('opacity',1);});
                        $
    ('#test a').css('background-color','#315A6A').end().css('opacity',0.55);

        

    })

        $

    ('#test a').hover(
                
    function () {

                    $

    (this).addClass('hoverMe');

            

    },
                
    function () {

                        $

    (this).removeClass('hoverMe');

                

    }
            
    );


    });


    </script>
    </body>
    </html>