Having trouble showing and hiding the span tag using mouseover and mouseout events. The ul and li elements are generating dynamically, so I attempted to toggle the display between block and none but it is not working as expected. Does anyone have a solution for this issue? Any help would be greatly appreciated.
Here is the code in app.component.html:
<ul class="nav-tabs">
<li class="item">
<a>Test1</a>
<span> -On </span>
</li>
<li class="item">
<a>Test2</a>
<span> -On </span>
</li>
<li class="item">
<a>Test3</a>
<span> -On </span>
</li>
</ul>
And here is how it's handled in app.component.ts:
ngOnInit() {
let m = this.elRef.nativeElement
.querySelector('#list > ul')
.querySelectorAll('li');
m.forEach(el => {
el.addEventListener('mouseover', function(e) {
console.log('Event triggered');
el.nextElementSibling('span').style.display = 'block';
});
el.addEventListener('mouseout', function(e) {
console.log('Event out');
el.nextElementSibling('span').style.display = 'none';
});
});
}
You can see a demo of the issue here: https://stackblitz.com/edit/angular-ivy-qw6hvg?file=src%2Fapp%2Fapp.component.ts