Issue
I have a container that is suppose to be displayed when I hover a text, but I also want the container to keep being displayed, in case the user wants to see something there (by hovering the container itself), but it disappears.
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>
TS:
displayProp: boolean = false;
displayPrope() {
this.displayProp = true;
}
hidePrope() {
this.displayProp = false;
}
Also, I created a live example in case anyone wants to see it better: https://stackblitz.com/edit/angular-ivy-pd987q
Solution
You can easily make it with native HTML fix:
<div (mouseenter)="displayPrope()" (mouseleave)="hidePrope()">
show on hover
<div
*ngIf="displayProp"
class="prop-div"
>
<span style="color: white">i am the container</span>
</div>
</div>
Answered By - Anton Marinenko
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.