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.看到这里的差异

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

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