ehm.. Si, ma io non sto sovrascrivendo nessuno stile

Aborro questa "soluzione":
codice:
<!doctype html>
<html>
    <head>
        <style>
        #contenitore{
			width:200px;
			height:200px;
			background-color:red;
        }


        #contenitore:hover, #contenitore2:hover{
			background-color:blue;
        }
		
		#contenitore2{
			width:200px;
			height:200px;
			background-color:purple;
		}
        </style>
    </head>
    <body>
        <div id="contenitore">
            <input type="button" onclick="document.getElementById('contenitore').id='contenitore2';" />
        </div>
    </body>
</html>
Al massimo potrei manipolare il colore direttamente nello style sheets via javascript, ma continuo a non capire perché dovrebbe perdere la regola nell'hover