Cargando...
Rango
Sexo
Mensajes
Última visita
Miembro desde

Foro Nube » Servicios » Soporte programación

Foro Cerrado
Este foro se encuentra cerrado de forma indefinida. Puedes utilizarlo para revisar material antiguo que desees recuperar.

[phpbb3] Hover preestablecido

Creado por ,

Mensaje [Página 1 de 1.]

Publicado el Vie 24 Oct - 14:03

avatar
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! ^^

A 0 usuarios le gusta esto

Publicado el Vie 24 Oct - 15:12

avatar
Administrador
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.

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Vie 24 Oct - 15:45

avatar
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

A 0 usuarios le gusta esto

Publicado el Vie 24 Oct - 15:53

avatar
Administrador
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á).

A 0 usuarios le gusta esto

Firma

Bret
Representante de la comunidad - Coordinador
Equipo de Foro Nube

Publicado el Vie 24 Oct - 15:54

avatar
Aaaaaaah! Vale! Muchas gracias! Soluciconado entonces!

Muchas gracias de nuevo! <3

A 0 usuarios le gusta esto
Contenido patrocinado

Publicado

A 0 usuarios le gusta esto

Con la tecnología de Foroactivo y punBB