Mi problema realmente no es un problema de wordpress, es un problema de css o html, pero ante la desesperación pido ayuda:
En el home de un wordpress: http://www.clinicanaranjoacosta.com/ Estoy intentando hacer tres rollovers (las tres bolas azules) . Pues bien, la primera me funciona a la perfección, pero la segunda y tercera, cuando retiro el ratón, por más vueltas que le doy no consigo hacer que vuelva la imagen de color azul.
El código que estoy usando es el siguiente: (pongo el de la sección entera:
[one_third]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibility = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img2.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img1.gif" name="rollover" /></p>
<h4 style="text-align: center;">PERIODONCIA</h4>
Cuidamos de la SALUD y ESTÉTICA de sus ENCÍAS con el MÁXIMO RIGOR CIENTÍFICO
</div>
[/one_third]
[one_third]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibility = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img4.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img3.gif" name="rollover" /></p>
<h4 style="text-align: center;">IMPLANTES</h4>
Implantología GUIADA POR ORDENADOR, técnica SIN PUNTOS, SIN INCISIONES, SIN MOLESTIAS Y DEL ALTA PRECISIÓN
</div>
[/one_third]
[one_third_last]
<div>
<div style="width: 120px; height: 80px; position: relative;"></div>
<p style="text-align: center;"><img style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseout="document.images.rollover.style.visibility = 'visible'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img2.gif" />
<img id="rollover" style="position: absolute; left: 0; top: 0; width: 40%; height: auto;" onmouseover="this.style.visibility = 'hidden'" alt="rollover" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/06/img1.gif" name="rollover" /></p>
<h4 style="text-align: center;">ORTODONCIA</h4>
La Ortodoncia del FUTURO ya es PRESENTE: sistema INVISALIGN. Consiga una sonrisa espléndida sin que la gente note que está siguiendo un tratamiento, y sin alterar su vida cotidiana
</div>
[/one_third_last]
<a href="/?page_id=52"><img alt="laura" src="http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/05/image-1.jpeg" width="400" height="auto" /></a>
<div>
<h1 style="text-align: left;">¿POR QUÉ ELEGIRNOS?</h1>
En nuestra clínica apostamos por la excelencia Académica y Clínica. Usted será atendido por Médicos Especialistas en Ortodoncia, Periodoncia e Implantes, acreditados por la Universidad Complutense de Madrid.
</div>
Y las css asociadas son:
.bola {
margin-left:30%;
margin-bottom:60px;
}
.bola2 {
margin-left:30%;
margin-bottom:60px;
}
.bola3 {
margin-left:30%;
margin-bottom:60px;
}
.textoservicios {
text-align: justify;
color:#808080;
}
y para media querie:
.bola{
width:18% !important;
height:auto !important;
margin-left:7%;
margin-bottom: 5%;
}
.bola2{
width:18% !important;
height:auto !important;
margin-left:39%;
margin-bottom: 5%;
}
.bola3{
width:18% !important;
height:auto !important;
margin-left:70%;
margin-bottom: 5%;
}
.textoservicios {
float: left;
width: 200px;
margin-right: 20px;
margin-left: 17px;
color:#808080
}
A ver si alguien me pudiera echar una mano, por favor
Gracias y un saludo
