CODEWITHSUNDEEP
angularhover
Harshit
Harshit

Reputation: 1565

Angular 2 hover not working

I'm trying to set hover feature on my website. But it is not working. It will be very much helpful if someone can help me out.

<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;
      }
      // ---------------------------------

How it looks currently with the above code - enter image description here

I want to have it in such a way when mouse cursor hovers over link, preview of page is shown. When I remove the cursor, preview of page should not be shown.

Upvotes: 1

Views: 8680

Answers (1)

El houcine bougarfaoui
El houcine bougarfaoui

Reputation: 37403

use mouseenter instead of mouseover . see the difference here

Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter.

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

Upvotes: 8

Related Questions