Q: mouseover fired for every element in div In my Angular 10 app I need to detect the mouse over event when cursor enters a div:
<div (mouseover)="onmouseover($event)">
  <span>element 1</span>
  <span>element 2</span>
  <span>element 3</span>
  <span>element 4</span>
</div>

Unfortunately the event is not only fired when the mouse moves over the div itself, but also for each of the containing elements separately.
How can I prevent this behavior? The event should only be fired once for the whole div.

A: That is the expected behavior of the mouseover event.

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.

Instead you could use the mouseenter event

The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved

Try the following
<div (mouseenter)="onmouseover($event)">
  <span>element 1</span>
  <span>element 2</span>
  <span>element 3</span>
  <span>element 4</span>
</div>


A: See this example it's same like this
HTML file
<div (mouseover)="changeText=true" (mouseout)="changeText=false">
  <span *ngIf="!changeText">Hide</span>
  <span *ngIf="changeText">Show</span>
</div>

TS file
@Component({
   selector: '---',
   templateUrl: './--.html'
})
export class AppComponent {
    changeText: boolean;
    constructor() {
       this.changeText = false;
    }
}

