Hola a todos, he llegado al limite

, y es que no logro conseguir el vento que deseo, tengo el siguiente codigo:
Código PHP:
<html><head>
<script language="JavaScript" type="text/javascript">
<!--
function over(elemento)
{
elemento.className = 'hover';
}
function out(elemento)
{
elemento.className = 'base';
}
function clic(elemento)
{
elemento.className = 'click';
}
// -->
</script>
<style>
.base {
width: 10px;
padding: 10px;
margin: 5px;
background: red;
}
.hover {
width: 10px;
padding: 10px;
margin: 5px;
background: blue;
}
.click {
width: 10px;
padding: 10px;
margin: 5px;
background: purple;
}
</style>
</head>
<body>
<div class="base" onmouseover="over(this)" onmouseout="out(this)" onclick="clic(this);return false;">Mi enlace #1</div>
<div class="base" onmouseover="over(this)" onmouseout="out(this)" onclick="clic(this);return false;">Mi enlace #2</div>
</body></html>
Mi idea es tener determinado numero de botones, los cuales tendran un stylo css definido ( base ), tmbien su hover, y cuando se de en alguno de esos botones se aplique otro estilo css a ese boton y que no se regrese por el MOUSEOVER.
Pero en si el mayor problema es que, si una vez activado ese boton, se da en otro boton, este regrese al estilo base, y al que se dio click, obtenga ese nuevo estilo.
Espero que alguien se apiedade d emi que esto ya me robo varias neuronas
Desde ya, Gracias.
Saludos !