Javascript Angular2停止子元素上的传播悬停事件，该事件将重放动画

我以角度的方式制作了一个悬停效果，但在子元素上，子元素上的传播悬停有问题。当按下Hower按钮时，动画将重播

当我使用mouseenter（）时，我失去了作用域，动画将在所有元素上播放

动画：

animations: [
        trigger('albumState', [
            state('inactive', style({
                bottom: '0px',
                opacity: 0
            })),
            state('active', style({
                bottom: '20%',
                opacity: 1
            })),
            transition('inactive => active', animate('200ms ease-in')),
            transition('active => inactive', animate('200ms ease-in'))
        ])
    ]

HTML:

正如我所说，如果我在方法

target.mouseenter（（）=>{[…]}）

中使用，我将失去作用域，动画将在所有砖块上播放

我的问题是：当鼠标悬停在按钮“.item按钮”上时，如何防止重播动画。对于claryfication，我将在父级

div

中为

none

设置CSS“

pointer event

”，并使用class

.album\uu项--description

，但按钮必须处于活动状态

<masonry-brick 
        *ngFor="let album of categoryAlbums | orderBy: ['activeAlbums']" 
        (click)="goDetail(album)" 
        class="album__item" 
        id="album" 
        (mouseover)="active(album, $event)" 
        (mouseout)="inactive(album, $event)">
            <div class="album__item--cover-container">
                <img class="album__item--cover" [src]="this.getCoverPhoto(album.cover)" alt="album cover">
                <div class="album__item--story">
                    <div class="album__item--title">
                        {{ album.title | uppercase }}
                    </div>
                    <div class="album__item--description" [@albumState]="album.state">
                        <div class="item-desc">
                            {{ album.desc }}
                        </div>
                        <div class="item-button">
                            <input class="btn btn-success album__item--button" type="button" value="Enter">
                        </div>
                    </div>
                </div>
            </div>
</masonry-brick>

active(album: Album, event: Event) { 
        let target = $('.album__item');
        let child = $('.item-button');
        album.state = 'active';
        console.log("ENTERED MOUSENTER", album);
    }
inactive(album: Album, event: Event) { 
        let target = $('.album__item');
        album.state = 'inactive';
        console.log("ENTERED LEAVE", album);    
    }