角度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

mouseoverの代わりにmouseenterを使用してください。差異を参照してくださいhere

マウスが子要素に入る、または子要素から離れるたびに、マウスオーバーがトリガーされますが、マウスは移動しません。

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