css – ngclass issue in dropdown items

i am using Angular CLI:9.0.7, , I want to make a dropdown menu where each item changes the background color every time the cursor is over it, however it gets confused between the items and an item that is not indicated changes color:

Dropdown issue

i am using ngClass an creating mouseover event
Html code

<div class="dropdown">
<mat-icon svgIcon="arrowback" role="button" id="dpm" class="margindropmessage" style="margin-top: -18px;margin-left: -20px; width: 80%; height: 80%;" data-toggle="dropdown"></mat-icon>
<div class="dropdown-menu dropmessage" aria-labelledby="dpm">
    <div class="dropdown-1st-item" (ngClass)="firtsDropItemMessage" (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
        <label class="firtitem">Responder</label>
    </div>
    <div class="dropdown-item dropitemmessage" (ngClass)="dropItemMessage" (mouseover)="changeStyle1($event)" (mouseout)="changeStyle1($event)">
        <label class="my-1 titleitem">Reenviar mensaje</label>
    </div>
    <div class="dropdown-item dropitemmessage1" (ngClass)="dropItemMessage1" (mouseover)="changeStyle2($event)" (mouseout)="changeStyle2($event)">
        <label class="my-1 titleitem">Destacar mensaje</label>
    </div>
    <div class="dropdown-item dropitemmessage2" (ngClass)="dropItemMessage2" (mouseover)="changeStyle3($event)" (mouseout)="changeStyle3($event)">
        <label class="my-1 titleitem">Eliminar mensaje</label>
    </div>

</div>

i tried to have a variable for each event
**Ts code**

  firtsDropItemMessage:string = 'fstitemdroppmessage';
  dropItemMessage:string = 'dropitemmessage';
  dropItemMessage1:string = 'dropitemmessage1';
  dropItemMessage2:string = 'dropitemmessage2';

  changeStyle($event){
    this.firtsDropItemMessage = $event.type == 'mouseover' ? 'fstitemdroppmessagehover' : 'fstitemdroppmessage';
  }

  changeStyle1($event){
    this.dropItemMessage = $event.type == 'mouseover' ? 'dropitemmessage' : 'dropitemmessagehover';
  } 
  changeStyle2($event){
    this.dropItemMessage1 = $event.type == 'mouseover' ? 'dropitemmessage1' : 'dropitemmessagehover2';
  }
  changeStyle3($event){
    this.dropItemMessage2 = $event.type == 'mouseover' ? 'dropitemmessage2' : 'dropitemmessagehover2';
  }

Css code

i tried to make a class for each dropdown item like this:

.dropitemmessage {
    color: #545871;
    font-weight: 500;
}

.dropitemmessagehover {
    color: #ffffff;
    background-color: #58BBFF;
    font-weight: 500;
}