如何在angular 9中处理ul li的mouseover和mouseout事件

尝试使用mouseover和mouseout显示和隐藏span标记。但不起作用。 ul，li是动态生成的，所以，我尝试添加显示块和无。但它不工作。如何做？如果有人知道，请帮助解决这个问题

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>

}

演示：

---

我们可以使用typescript吗？是的，有很多解决方案。下面是一个例子：这种解决方案的缺点是，每当您将鼠标悬停在某个项目上时，组件都会再次呈现，而CSS不会出现。

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

.item > span {
  visibility: hidden;
}

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