elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS  (Leído 284 veces)
Drakaris

Desconectado Desconectado

Mensajes: 73


Lo increíble no es lo que ves, sino como es


Ver Perfil
Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
« en: 1 Octubre 2017, 01:12 »

Hoa, tengo un icono fa  y un div, lo que me gustaría hacer en que cuando pase por el icono fa me aparezca el div, todo con css, se que es con hover pero no se muy bien como hacerlo, hay algún tutorial? O algun ejemplo.
Código:
<!DOCTYPE html>
<html>
<head>
<style>
  .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
    width: auto;
    height: auto;
    line-height: 100%;
    padding: 5px;
    border: 4px solid #FACC2E;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #A8A8A8;
    background-color: #F5DA81;
    font-family: MV Boli;
    font-size: 1.3vw;
    max-width: 50%;
    text-align: left;
    z-index: 0;
    position: absolute;
    left: 25%;
    opacity: 0;
  }
  button:hover .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
  opacity:1;
 }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<center class="pop-up">
<div class="ctl00_ContenidoPagina_ctl06_spnTooltip">
      <font color="#FA5858"><big>Solo para administradores&#58;</big></font> Para a&ntilde;adir un enlace en la tabla, tiene que ir a su curso y grupo.
</div>
</center>
<button style="background:none; border-radius:10; top:50px; position:absolute;">i</button>
</body>
</html>

Y no me funciona, porque será?

Gracias


En línea

ivancea96


Desconectado Desconectado

Mensajes: 3.270


ASMático


Ver Perfil WWW
Re: Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
« Respuesta #1 en: 1 Octubre 2017, 14:34 »

Lo que dices aquí:
Código
  1. button:hover .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{}
Es que cuando se haga hover a button,  los elementos con la clase .ct100_..., dentro de elementos con la clase .pop-up dentro de ese elemento button, se cambie la opacidad.
En definitiva, estás afectando a los elementos dentro del button.

En CSS3, tienes la solución de afectar a elementos hermanos que estén después. Recalco lo de después. En tu ejemplo, si pones el button primero, quedaría así, usando el selector "+" (el hermano inmediatamente después). (También existe "~", que es cualquier hermano que esté después, no solo el siguiente):
Código
  1.  .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
  2.    width: auto;
  3.    height: auto;
  4.    line-height: 100%;
  5.    padding: 5px;
  6.    border: 4px solid #FACC2E;
  7.    border-radius: 5px;
  8.    box-shadow: 1px 1px 2px #A8A8A8;
  9.    background-color: #F5DA81;
  10.    font-family: MV Boli;
  11.    font-size: 1.3vw;
  12.    max-width: 50%;
  13.    text-align: left;
  14.    z-index: 0;
  15.    position: absolute;
  16.    left: 25%;
  17.    opacity: 0;
  18.  }
  19.  button:hover + .pop-up .ctl00_ContenidoPagina_ctl06_spnTooltip{
  20.  opacity:1;
  21. }
  22. <script src="http://code.jquery.com/jquery-latest.js"></script>
  23. </head>
  24.    <button style="background:none; border-radius:10; top:50px; position:absolute;">i</button>
  25.    <center class="pop-up">
  26.        <div class="ctl00_ContenidoPagina_ctl06_spnTooltip">
  27.              <font color="#FA5858"><big>Solo para administradores&#38;#58;</big></font> Para a&ntilde;adir un enlace en la tabla, tiene que ir a su curso y grupo.
  28.        </div>
  29.    </center>
  30. </body>
  31. </html>

Solo añadí el "+" después del hover para elegir al siguiente hermano, y cambié el orden para que el botón esté primero.


En línea

Drakaris

Desconectado Desconectado

Mensajes: 73


Lo increíble no es lo que ves, sino como es


Ver Perfil
Re: Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS
« Respuesta #2 en: 2 Octubre 2017, 22:03 »

Muchas gracias ivancera96, era justo lo que quería, mil gracias.
« Última modificación: 4 Octubre 2017, 18:13 por #!drvy » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines