Mi hover no funciona en absoluto. Necesito que mi elemento solo aparezca cuando paso el mouse sobre él, pero no puedo hacer que funcione.

No sé si es necesario reemplazar la etiqueta i con una a , o si el error está en el css. También probé con display: none y display: block , pero el problema aún no se resuelve. ¿Qué puede ser?

Mi html:

 <div class="vertical-line"></div> <div> <h4>{{ banner.textPrimary }}</h4> </div> <div> <h2>{{ banner.textSecondary }}<br /></h2> </div> <div class="vertical-line"></div> <div> <a href="{{ banner.buttonLink }}" target="_blank"> <button [style.background-color]="banner.buttonColor" style="border: solid 1px" class="btn-about-us" mat-raised-button color="primary" > {{ banner.buttonText }} </button> </a> </div> </div> <i (click)="openBannerDeleteModal(banner.uuid)" *ngIf="isAdminFlag === 'true'" class="fas fa-trash-alt delete-modal" id="banner-delete" aria-hidden="true" ></i>

Y mi CSS:

 .delete-modal{ cursor: pointer; position: absolute; bottom: 80%; left: 91%; z-index: 1000; visibility: hidden; } .delete-modal:hover{ visibility: visible; }