I'm having trouble with my hover effect. I want an element to only be visible when hovered over, but it's not working as expected.
I've considered replacing the i tag with an a, and have also tried using both display: none and display: block in the CSS. However, the issue persists. What could be causing this problem?
This is my 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>
<i
(click)="openBannerDeleteModal(banner.uuid)"
*ngIf="isAdminFlag === 'true'"
class="fas fa-trash-alt delete-modal"
id="banner-delete"
aria-hidden="true"
></i>And here is my CSS:
.delete-modal{
cursor: pointer;
position: absolute;
bottom: 80%;
left: 91%;
z-index: 1000;
visibility: hidden;
}
.delete-modal:hover{
visibility: visible;
}