ROLLOVER

Inicio Foros WordPress Themes y Diseño ROLLOVER

Etiquetado: 

Este debate contiene 2 respuestas, tiene 3 mensajes y lo actualizó  Alejandro hace 5 años, 3 meses.

  • Autor
    Publicaciones
  • #69981

    inventanova
    Participante

    Hola a todos

     

    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 class=”textoservicios”>
    <div style=”width: 120px; height: 80px; position: relative;”></div>
    <p style=”text-align: center;”><img class=”bola” 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 class=”bola” 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>
    &nbsp;
    <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 class=”textoservicios”>
    <div style=”width: 120px; height: 80px; position: relative;”></div>
    <p style=”text-align: center;”><img class=”bola2″ 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 class=”bola2″ 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>
    &nbsp;
    <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 class=”textoservicios”>
    <div style=”width: 120px; height: 80px; position: relative;”></div>
    <p style=”text-align: center;”><img class=”bola3″ 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 class=”bola3″ 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>
    &nbsp;
    <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]

    &nbsp;

    <a href=”/?page_id=52″><img class=”fotoinicio” alt=”laura” src=”http://www.clinicanaranjoacosta.com/wp-content/uploads/2013/05/image-1.jpeg” width=”400″ height=”auto” /></a>
    <div class=”textoinicio”>
    <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

     

  • #70001

    antoniohg
    Participante

    Para hacer eso que quieres estás utilizando un código muy sucio.

    Yo lo haría utilizando sólo CSS.  Usaría una imagen de fondo en el enlace que cambiara con el estado hover.

  • #70007

    Alejandro
    Participante

    Tienes que hacerlo mejor con css con .bola:hover

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest