Código HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT>
function mostrar(color){
document.getElementById('capa1').style.backgroundColor= color;
}
</SCRIPT>
</head>
<body>
<div style="background-color:#FFFF00; position:absolute; height:56px; width: 330px; top:0px; left: 0px;" onmouseover="mostrar('#FFFF00')"></div>
<div style="background-color:#FF0000; position:absolute; height:56px; width: 330px; left: 330px; top: 0px;" onmouseover="mostrar('#FF0000')"></div>
<div style="background-color:#0000FF; position:absolute; height:56px; width: 330px; left: 660px; top: 0px;" onmouseover="mostrar('#0000FF')"></div>
<div style="background-color:#00FF00; position:absolute; height:56px; width: 330px; left: 966px; top: 0px;" onmouseover="mostrar('#00FF00')"></div>
<div id="capa1" style="background-color:#FFFF00; position:absolute; width:1297px; height:546px; left: 0px; top: 56px; "></div>
</body>
</html> Aqui tienes amigo, lo que pasaba era que la capa era superpuesta o sobrepuesta una delante de la otra y por lo tanto al estar en estado "mostrado" una encima de otra no se podia visualizar una vez que habia sido mostrada.
En fin lo que hice fue cambiar la propiedad backgrpundColor desde javascript.