Angular 2悬停不起作用

Question

我试图在我的网站上设置悬停功能。但它没有用。如果有人可以帮助我，将会非常有帮助。

<div class="text-result" *ngIf="Display('all')">
            <div *ngFor="let item of items$|async let i = index; trackBy: trackHero" class="result">
                <div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()">
                    <a href="{{item.link}}">{{item.title}}</a>
                </div>
                    <iframe [src]="myUrlList[i]"></iframe>
                <div class="link">
                    <p>{{item.link}}</p>
                </div>
                <div class="description">
                    <p>{{item.description}}</p>
                </div>
                <div>
                    {{item.pubDate|date:'fullDate'}}
                </div>
            </div>
        </div>

hoverBox: boolean = false;

// display content on hover
      // --------------------------------
      overTitle(){
        if(this.hoverBox == true){
          this.hoverBox = false;
        }
        else {
          this.hoverBox = true;
        }
      }
      trackHero(index, item){
        console.log("item", item);
        return item ? item.id : undefined;
      }
      // ---------------------------------

目前使用上述代码看起来如何 -

当鼠标光标悬停在链接上时，我希望以这种方式拥有它，显示页面预览。当我移除光标时，不应显示页面预览。

Answer 1

使用mouseenter代替mouseover。看到差异here

每次鼠标进入或离开子元素时，都会触发鼠标悬停，但不会触发鼠标中心。

<div class="title" (mouseenter)="hoverBox = true;" (mouseleave)="hoverBox = false;">