Entonces, estoy tratando de hacer un encabezado que, al pasar el mouse sobre él, muestre un botón. Y si no, el botón desaparecerá mientras sigue ocupando espacio en el diseño. He intentado,
.button { visibility: hidden; } .heading:hover + .button { visibility: visible }Pero el atributo de visibilidad no cambiará al pasar el cursor sobre él.
Traté de usar
.button { visibility: hidden; } .heading:hover + .button { visibility: visible }Pero no funcionó. Esperaba que el atributo de visibilidad cambiara al pasar el mouse sobre un elemento con la clase "título", pero no fue así. Estoy seguro de que ha detectado que estoy pasando el cursor sobre él porque en un intento anterior usé el atributo de visualización y funcionó, solo que cuando no estoy pasando el cursor sobre el encabezado, el botón no ocupará ningún espacio, cambiando levemente el diseño de la página. Código antiguo:
button { display: none; } .heading:hover + .button { display: block; }Además, en caso de que esté confundido, la clase "título" se aplica en el elemento de título mientras que la clase "botón" se aplica al botón. Estaba pensando que podría necesitar JavaScript para que funcione, así que agregué la etiqueta de JavaScript. jQuery también podría funcionar, pero creo que usa el atributo de visualización, lo que hace que el elemento no ocupe espacio cuando está oculto.
Sin ver la estructura DOM, le sugeriré el siguiente código css.
.button { opacity: 0; pointer-events: none; transition: opacity .3s; } .heading:hover .button { opacity: 1; pointer-events: visible; }Suponiendo que su código HTML es algo como esto:
<div class="heading"> <a href="#" class="button">YOUR BUTTON</a> </div> Si agrega un + a su selector de CSS, está seleccionando el siguiente elemento en el mismo nivel de jerarquía. Para seleccionar un elemento secundario, como supongo que es el botón, debe dejar un espacio en blanco entre .parent-element y .child-element como en el ejemplo anterior.