각도 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

마우스가 자식 요소로 들어가거나 자식 요소를 떠날 때마다 마우스 오버가 트리거되지만 mouseenter는 트리거되지 않습니다.

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