1

Al hacer hover en el botón aparecen los elementos ocultos, lo que busco hacer es que al mismo tiempo que aparecen estos elementos ocultos, desaparezca un elemento que está visible (icono-6).

Esto es lo que tengo:


/* Elementos ocultos */
.hidef {
  color: white;
  position:absolute;
  opacity: 0;
visibility: hidden;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
line-height: 150%;
}

/* Boton */
.myDIVf {    
    color: white;
    font-weight: 200;
    letter-spacing: 1.8px;
    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: rgba(2, 1, 1, 0);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
}


/* Hover del Boton */
.myDIVf:hover {  
      color: #052532;
    background-color:#FFFFFF;
    cursor:pointer;
    margin-top: -7px;
    transition: all .3s;
}

 
/* Icono */ 
.img6 {
  margin-top:-278px;
  margin-left: 64px;
  width: 48%;
}


/* Titulo */
.img6-2 {
  margin-top:-245px;
  margin-left: 0px;
  width: 100%;
}
    
/* Hover para mostrar elementos ocultos */
.myDIVf:hover + .hidef {
 color: white;
    visibility: visible;
    opacity: 1;
    line-height: 150%;
}

Busco que el elemento icono-6 desaparezca al hacer hover en el botón para que los elementos ocultos aparezcan en el mismo sitio que icono-6 para que no aparezcan encima de el elemento icono-6.

1
  • Hola. No se de casos de uso que logren ese efecto usando sólo css. En mi experiencia hace falta agregar algo de javascript para responder a los eventos mouseenter mouseleave (ligados al estado hover) y provocar el efecto deseado. Revisa Bootstrap collapse
    – quevedo
    Commented el 2 sept. 2020 a las 18:21

1 respuesta 1

2

Te recomiendo usar javascript. Puedes hacer lo siguiente. Te recomiendo usar id en lugar de clases para un solo objeto para no tener ningún problema. Espero haber ayudado un poco a tu pregunta.

let boton = document.getElementById('myDIVf');
let div = document.getElementById('div');
let icono = document.getElementById('img6');

boton.addEventListener('mouseover', function() {
  div.style.display = "block"; //Puedes usar inline o cualquier otro
  icono.style.display = "none"; 
});

boton.addEventListener('mouseout', function() {
  div.style.display = "none";
  icono.style.display = "block"; 
});
#div {
  display:none;
}
<div id="div">Esto es un div</div>
<h2 id="img6">Icono</h2>
<button id="myDIVf">Hover</button>

1
  • Buen código, me viene bien para mi recopilación de funciones.
    – Ororok
    Commented el 2 sept. 2020 a las 18:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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