如何在 Angular 9 中处理 ul li 的 mouseover 和 mouseout 事件答案

【问题标题】：How to handle mouseover and mouseout events for ul li in angular 9如何在 Angular 9 中处理 ul li 的 mouseover 和 mouseout 事件
【发布时间】：2021-08-01 21:14:08
【问题描述】：

尝试使用 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>

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

【问题讨论】：

标签： angular typescript angular8

【解决方案1】：

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

.item > span {
  visibility: hidden;
}

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

【讨论】：

我们可以使用打字稿吗？
是的，有很多解决方案。这是一个示例：stackblitz.com/edit/angular-ivy-abxhtt
这个解决方案的缺点是，每次当你将鼠标悬停在一个项目上时，组件都会再次渲染，而 CSS 不会发生。