如何在 angular 9 中处理 ul li 的鼠标悬停和鼠标移出事件

Question

尝试使用 mouseover 和 mouseout 显示和隐藏 span 标签。但没有工作。 ul, li 是动态生成的，所以，我正在尝试添加显示块，但 none.But 不是 working.How 可以吗？如果有人知道，请帮助解决这个问题。

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>

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';
  });
});

}

演示：https://stackblitz.com/edit/angular-ivy-qw6hvg?file=src%2Fapp%2Fapp.component.ts

Answer 1

https://stackblitz.com/edit/angular-ivy-7ho27c

.item > span {
  visibility: hidden;
}

.item:hover > span {
  visibility: visible;
}

如何在 angular 9 中处理 ul li 的鼠标悬停和鼠标移出事件

How to handle mouseover and mouseout events for ul li in angular 9

typescript

angular

angular8