He creado el evento a:hover que me faltaba pero sigue sin funcionarme.
Mira te paso un ejemplo de lo q busco exactamente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<link href="estilos css ciudades.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>
<body>
<div class="contenedor">
<div class="encabezado"><span class="h2">Ejercicio de comportamientos con Divs</span>
<span class="h1">Elige tu ciudad favorita!</span></div>
<div class="navegador"><a href="#" onMouseOver="MM_changeProp('paris','','visibility' ,'visible','DIV')" onMouseOut="MM_changeProp('paris','','visibility', 'hidden','DIV')">Paris</a> <a href="#" onMouseOver="MM_changeProp('amsterdan','','visibil ity','visible','DIV')" onMouseOut="MM_changeProp('amsterdan','','visibili ty','hidden','DIV')">Amsterdan</a> <a href="#" onMouseOver="MM_changeProp('london','','visibility ','visible','DIV')" onMouseOut="MM_changeProp('london','','visibility' ,'hidden','DIV')">London</a> <a href="#" onMouseOver="MM_changeProp('bruselas','','visibili ty','visible','DIV')" onMouseOut="MM_changeProp('bruselas','','visibilit y','hidden','DIV')">Bruselas</a> <a href="#" onMouseOver="MM_changeProp('moscu','','visibility' ,'visible','DIV')" onMouseOut="MM_changeProp('moscu','','visibility', 'hidden','DIV')">Moscu</a></div>
<div class="paris" id="paris"></div>
<div class="amsterdan" id="amsterdan"></div>
<div class="london" id="london"></div>
<div class="bruselas" id="bruselas"></div>
<div class="moscu" id="moscu"></div>
</div>
</body>
</html>
Y la hoja estilos CSS:
@charset "utf-8";
body {
text-align: center;
margin: 0px;
padding: 0px;
}
a {
color: #333333;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: #FF0000;
}
.contenedor {
width: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid #000000;
padding: 5px;
height: 300px;
text-align: left;
}
.paris {
font-family: Arial, Helvetica, sans-serif;
background-image: url(imagenes/7dep_paris.jpg);
height: 200px;
width: 200px;
margin-top: 5px;
position: absolute;
visibility: hidden;
}
.navegador {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333333;
text-align: left;
height: auto;
}
.encabezado {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-left-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
height: 40px;
}
.h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
text-align: right;
float: right;
line-height: 30px;
}
.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
line-height: 30px;
color: #000000;
text-align: left;
}
.amsterdan {
font-family: Arial, Helvetica, sans-serif;
background-image: url(imagenes/amsterdan.jpg);
height: 200px;
width: 200px;
margin-top: 5px;
position: absolute;
visibility: hidden;
}
.london {
font-family: Arial, Helvetica, sans-serif;
background-image: url(imagenes/london.jpg);
height: 200px;
width: 200px;
margin-top: 5px;
position: absolute;
visibility: hidden;
}
.bruselas {
font-family: Arial, Helvetica, sans-serif;
background-image: url(imagenes/Bruselas-Grand-Place.jpg);
height: 200px;
width: 200px;
margin-top: 5px;
position: absolute;
visibility: hidden;
}
.moscu {
font-family: Arial, Helvetica, sans-serif;
background-image: url(imagenes/Moscu.jpg);
height: 200px;
width: 200px;
margin-top: 5px;
position: absolute;
visibility: hidden;
}