0

He intentado hacer que aparezca el footer cuando el click esté encima de la flecha, pero ocurre parpadeo y no funciona, ¿Se puede hacer solo con css o sera necesario js?

body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 99999;
    bottom: 0;
    height: 10px;
    width: 100%;
    cursor: pointer;
}
.test > p {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;

  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test:hover{
  background-color: rgba(0, 0, 0, 0.6);
  height: 100px;
    /*color:#000;*/
    margin-top: 25px;
}
.test:hover > p {
  display: block;
  font-size: 21px;
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
<div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    
<div class="block"></div>
    
<div class="test">
<img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
    <p>This is my footer
     

   </p>
</div>

2
  • Si buscas solución puramente CSS, deberás re-estructurar el código, ya que si deja el ratón de estar encima de la imagen, ya no podrás ver el footer. Con jquery o js básicamente es lo mismo, pero puedes hacer eventos de click para mostrar/ocultar el footer
    – Zander
    el 10 ene. 2017 a las 16:13
  • @Cheshire puedes revisar mi respuesta
    – hubman
    el 10 ene. 2017 a las 21:11

2 respuestas 2

2

Tu ejemplo funciona, el parpadeo es porque cuando pones el cursor sobre la imagen se hace visible el elemento p y éste "cubre" la imagen perdiendo así el hover. Ésto lo puedes solucionar añadiendo un z-index superior a la imagen.

La propiedad z-index establece el orden de visibilidad en una pila de elementos. Por defecto, el padre siempre estará debajo de la pila, mientras que el último hijo estará en el tope.

Te dejo un ejemplo de ésto y haciendo la imagen absoluta.

body {
    margin: 0;
}
.block {
    height: 2000px;
}
.header img {
    width: 100%;
}
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 99999;
    bottom: 0;
    height: auto;
    width: 100%;
    cursor: pointer;
}
.test > p {
  background-color: rgba(0, 0, 0, 0.6);
  display: none;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test img {
  background-color: rgba(0, 0, 0, 0.6);
  left: 2px;
  position: absolute;
  bottom: 2px;
  height: 20px;
  width: 20px;
  z-index: 10;
}
.test > img:hover + p {
  display: block;
  height: 100px;
  font-size: 21px;
  animation: fadein 2s;
  -moz-animation: fadein 2s; /* Firefox */
  -webkit-animation: fadein 2s; /* Safari and Chrome */
  -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
<div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    
<div class="block"></div>
    
<div class="test">
<img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
    <p>This is my footer
     

   </p>
</div>

1

Si, si se puede, añadiendo un poco de CSS3 sin la necesidad de JavaScript se podría crear un efecto similar, se podría hacer de dos formas, una es con hover la que estas intentando utilizar y un buen ejemplo que te han aportado y otra forma más avanzada seria utilizando un input checked, que sería mediante un botón.

Nota: además se podría implementar los pseudo-elementos :before y/o :after e insertar iconos de fuentes o texto y crear otro efecto a nuestro botón de manera fácil.

Ejemplo implementando botón con clic:

body {
    height:100%; width:100%;
    margin: 0;
    overflow-x:hidden;
}

.header img {
    width: 100%;
}

/*Invisible checkbox*/
input[type=checkbox] { 
   clip: rect(0, 0, 0, 0);  
   position: absolute; 
}   
/*Posicion flecha*/
label[for=btn-footer] {
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed; 
    bottom:20px; 
    left:20px;
    padding: .3rem;
    z-index:101;
}
/* Mostramos pie de pagina */
#btn-footer:checked ~ .test {
   display:block;
   bottom:0;
   transition: bottom 1s linear;

}
/* Cambiamos estilos para flecha */
#btn-footer:checked + label {
   bottom:60px;
   transform:rotate(-180deg);
    
 }
/* Estilos pie de pagina */
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: -100px;/* Invisible */
    height: 100px;
    width: 100%;
    z-index:100;
    overflow:hidden;
    cursor: pointer;
    transition: bottom 1s linear;
}
.test p {      
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  color:white;

  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
/* Transiciones, para efectos a nuestra caja y boton */
.test,label[for=btn-footer],#btn-footer:checked + label[for=btn-footer] {
    transition: bottom 1s linear;
}

   
<div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non eleifend sem. Fusce tristique, lacus eget ultricies sollicitudin, urna justo venenatis neque, in scelerisque turpis ante quis nibh. Nunc pellentesque luctus suscipit. Vivamus eu ex bibendum, malesuada lorem id, rutrum diam. Pellentesque blandit magna tellus, cursus auctor elit pulvinar tristique. Aliquam vulputate vitae risus vitae pulvinar. Curabitur vitae posuere magna. Sed vitae maximus sem, eu fringilla diam.<br />
<br />
Integer volutpat auctor orci, vel faucibus felis ultricies sit amet. Donec eget elit at sem commodo mattis feugiat quis nibh. Aliquam quis turpis nec libero hendrerit molestie. Suspendisse et mauris blandit, posuere ligula vel, aliquam ex. Nam ut blandit mi, eget imperdiet ipsum. Aliquam tincidunt mauris consectetur orci elementum, eu dignissim metus pharetra. Sed a elit viverra, dictum justo ut, rhoncus tellus. Aliquam erat volutpat. Vivamus suscipit volutpat orci id fermentum. Proin vel euismod est, sit amet bibendum magna. Nunc tincidunt tristique magna, eget mattis ante pharetra in.<br />
<br />
Nullam lacinia arcu rutrum congue accumsan. In malesuada accumsan metus in bibendum. Cras auctor nulla metus, non aliquet neque ullamcorper eget. Curabitur sollicitudin sit amet lorem et convallis. Ut nec pharetra sapien. Nulla tristique vulputate magna elementum tristique. Vivamus ut quam ex. Pellentesque id tincidunt turpis. Pellentesque suscipit at ligula ut consequat. Vestibulum eu consectetur est. Proin porta rhoncus elit sed dictum. Cras auctor nisl leo, at egestas lectus auctor vel. Proin faucibus enim sapien. Etiam risus neque, viverra ac vulputate sed, dapibus at orci. Nulla faucibus turpis ac neque elementum cursus. Aliquam in est nisi.<br />
<br />
<!-- boton pie pagina -->
<input type="checkbox" id="btn-footer" />

<label for="btn-footer">
   <img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
</label>

<!-- Contenido pie pagina -->        
<div class="test">    
   <p>This is my footer</p>
</div>

6
  • puedes revisar mi respuesta porfavor
    – hubman
    el 10 ene. 2017 a las 22:33
  • es muy buena tu respuesta +1, pero mi respuesta quiero hacerlo funcionar y no da en local
    – hubman
    el 10 ene. 2017 a las 22:38
  • no hice la prueba, solo este ejemplo hice la prueba de manera local y no funciona, sale error
    – hubman
    el 10 ene. 2017 a las 22:45
  • ¿que error te sale en concreto, aver si te puedo ayudar? @acR
    – D.Bulten
    el 10 ene. 2017 a las 22:46
  • este error en la linea 9 el cual es este "var a = el.clientHeight;"
    – hubman
    el 10 ene. 2017 a las 22:47

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.