Can anyone help with setting up a container to display when hovering over text, but also stay visible if the user hovers over the container itself? Currently, it disappears when hovering over the container.
Here is the HTML:
<p (mouseenter)="displayPrope()" (mouseleave)="hidePrope()">show on hover</p>
<div
*ngIf="displayProp"
(mouseenter)="displayPrope()"
(mouseleave)="hidePrope()"
class="prop-div"
>
<span style="color: white">i am the container</span>
</div>
In the TypeScript file:
displayProp: boolean = false;
displayPrope() {
this.displayProp = true;
}
hidePrope() {
this.displayProp = false;
}
I've created a live example for reference: https://stackblitz.com/edit/angular-ivy-pd987q