salve ragazzi ho il seguente codice:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>hovered - selected</title>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <style type="text/css"> 
        #vynil
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image:url(pulsante%20non%20selezionato.png);
        }
        
        #vynil.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra.png);
        }
        
        #vynil.selected
        {
            background-image: url(pulsante%20selezionato_pennello.png);
        }
		
        #digital
        {
            width:86px;
            height:33px;
            cursor:pointer;
			background-image: url(pulsante%20non%20selezionato_02.png);
        }
        
        #digital.hovered
        {
            background-image: url(pulsante%20selezionato_cursore%20sopra02.png);
        }
        
        #digital.selected
        {
            background-image: url(pulsante%20selezionato_pennello_02.png);
        }		
    </style>
    <script type="text/javascript">
        $(function() {
            $("#vynil").hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            }).click(
                function() {
                    $("#digital").removeClass("selected");
                    $(this).addClass("#vynil.selected");
                }
            );
        });
		
		$(function() {
            $("#digital").hover(
            function() {
                //hover in
                $(this).addClass("hovered");
            },
            function() {
                //hover out
                $(this).removeClass("hovered");
            }).click(
                function() {
                    $("#digital").removeClass("#digital.selected");
                    $(this).addClass("selected");
                }
            );
        });
    </script>
</head>

<body>
    <div id="vynil">
        
    </div>
    
    <div id="digital">
        
    </div>
</body>

</html>
Praticametne quando vado sui pulsanti mi carica l'immagine in hover, quando clicco resta selezionata però il problema è:

Quando clicco vynil, non resta l'immagine selezionata, mentre quando clicco digital va bene, poi clicco vynil si deseleziona digital ma non resta selezionata vynil.
Come posso risolvere?