Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS

Drakaris · 1 Octubre 2017, 01:12 AM

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 [Seleccionar]


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

ivancea96 · 1 Octubre 2017, 14:34 PM

Lo que dices aquí:

Código (css) [Seleccionar]

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 (html5) [Seleccionar]

<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>
    <button style="background:none; border-radius:10; top:50px; position:absolute;">i</button>
    <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>
</body>
</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.

Drakaris · 2 Octubre 2017, 22:03 PM

Muchas gracias ivancera96, era justo lo que quería, mil gracias.

Test Foro de elhacker.net SMF 2.1

Como hacer que cuando pase por un elemento HTML me abra otro elemento con CSS

Drakaris

ivancea96

Drakaris