[phpbb3] Hover preestablecido

Ver el tema anterior Ver el tema siguiente Ir abajo

[phpbb3] Hover preestablecido

Mensaje por Quinn el Vie 24 Oct - 14:03

Creo que el título no es el correcto pero no se me ocurre una forma mejor de llamarlo :c

Veréis, me gustaría saber si es posible que un hover salga sin necesidad de escirbir todo el código; os dejo un ejemplo que no me he explicado nada bien.

Código:
<div class="code1"><img src="http://placehold.it/65x65"><div class="code2">Texto</div></div>
  </div>

Con el siguiente css:

Código:
.code1 {
  position: relative;
  display: inline-block;
}

.code2 {
  width: 300px;
  height: auto;
   display: none;
  position: absolute;
  top: 20px;
  left: 70px;
}

.code1:hover .code2 {
   display: block;
   transition:  0.3s ease-out;
}


El texto saldría al pasar el ratón por la imagen como un hover normal. Mi pregunta es: Como siempre será esa imagen y ese texto ¿Es posible que aparezca el hover poniendo por ejemplo solamente un div? Algo así:

Código:
<div class="code1"></div>

Gracias de antemano! ^^
avatar
Quinn

Mensajes : 113
Fecha de inscripción : 25/08/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [phpbb3] Hover preestablecido

Mensaje por Bret el Vie 24 Oct - 15:12

Sí, se puede. Utiliza la siguiente combinación de código:

HTML
Código:
<div class="code1"></div>

CSS
Código:
.code1 {
    background: transparent url('http://placehold.it/65x65') no-repeat 0 0;
    width: 65px;
    height: 65px;
}

.code1::after {
    content: 'Hola';
    opacity: 0;
}
      
.code1:hover::after {
    opacity: 1;
}

Como ya supondrás, la URL es la URL de la imagen y el texto «Hola» dentro de los símbolos de minutos es el texto de dentro. Sin embargo, ten en cuenta lo siguiente:


  • Este método está restringido solo a cuando el contenido que quieres es texto, no HTML.
  • Siempre puedes interpretar el selector ::after como un DIV imaginario que está dentro de .code1, por lo que podrás ponerle fondo y esas cosas.


Por cierto, muevo a la zona de soporte de programación.

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube
avatar
Bret
Administrador

Mensajes : 544
Fecha de inscripción : 10/08/2013

Ver perfil de usuario http://www.foronube.net

Volver arriba Ir abajo

Re: [phpbb3] Hover preestablecido

Mensaje por Quinn el Vie 24 Oct - 15:45

Vaale, entonces en el caso de que quiera poner un texto más largo que "hola" quedaría de la siguiente forma:

Ejemplo feo


He intentado que aparezca fuera de la imagen pero no lo consigo, cómo sería en ese caso? porque con margins se me mueve todo. Es decir, que aparezca como si fuera un cuadrito a la derecha de la imagen por ejemplo.

Gracias de nuevo! <3


Última edición por Quinn el Vie 24 Oct - 15:53, editado 1 vez
avatar
Quinn

Mensajes : 113
Fecha de inscripción : 25/08/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [phpbb3] Hover preestablecido

Mensaje por Bret el Vie 24 Oct - 15:53

Puedes jugar con los posicionamientos.

Código:
.code1 {
    background: transparent url('http://placehold.it/65x65') no-repeat 0 0;
    width: 65px;
    height: 65px;
    font-family: 'Calibri', sans-serif;
    font-size: 12px;
    position: relative;
}
.code1::after {
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In molestie, orci ut tincidunt tincidunt, sem ligula laoreet neque, nec pretium eros erat et libero. Pellentesque nec felis consectetur, mattis sapien a, venenatis augue. Maecenas elementum tincidunt tortor. Nullam sit amet lorem aliquet, suscipit lacus vel, pulvinar dolor. Nullam pretium aliquam tellus sagittis vestibulum. Duis ante dui, accumsan at augue sed, pulvinar ultrices augue. Curabitur vitae maximus diam. Pellentesque magna dolor, venenatis quis ligula in, hendrerit vehicula velit. Ut et nulla ligula. Maecenas at mauris eu mauris condimentum ornare ac ut magna.';
    opacity: 0;
    left: 65px;
    top: 0;
    background-color: lightgrey;
    display: block;
    position: absolute;
    width: 100px;
}
.code1:hover::after {
    opacity: 1;
}

En el código anterior puse posicionamiento relativo y convertí al elemento interior en un bloque para luego moverlo de forma absoluta. Esta práctica es un poco engorrosa y para hacer esto te recomiendo mejor hacerlo con HTML (para eso está).

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube
avatar
Bret
Administrador

Mensajes : 544
Fecha de inscripción : 10/08/2013

Ver perfil de usuario http://www.foronube.net

Volver arriba Ir abajo

Re: [phpbb3] Hover preestablecido

Mensaje por Quinn el Vie 24 Oct - 15:54

Aaaaaaah! Vale! Muchas gracias! Soluciconado entonces!

Muchas gracias de nuevo! <3
avatar
Quinn

Mensajes : 113
Fecha de inscripción : 25/08/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: [phpbb3] Hover preestablecido

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.