2
votes

angulaire - Afficher ou masquer le bouton lors d'un survol de la souris div

J'ai un petit projet angulaire qui affiche la liste des voitures après avoir effectué une action de recherche dans la base de données. Je veux créer une situation dans laquelle chaque fois qu'un utilisateur passe avec la souris sur le div (

 ) le bouton ( ) est affiché et chaque fois que l'utilisateur quitte la zone de la div, le même bouton se cache.  Une idée comment puis-je faire cela? Si cela est possible, comment puis-je faire quelque chose de similaire lorsque l'utilisateur utilise un appareil mobile? 
  La liste est créée dynamiquement à partir d'une recherche dans la base de données, je ne peux donc pas utiliser l'identifiant CSS pour l'afficher ou la masquer avec CSS. 
 <a class="result_row_item" *ngFor="let item of cars; let i = index">
    <div class="about">
        <div class="mark">
            <b>{{item.manufacturerName}}</b>
        </div>
        <div class="descr">
            <span class="safety_mark">safety mark -<b> {{item.safetyMark}}  </b></span>
            <span class="zaro_to">0-100 <b> {{item.zeroTo100}} </b></span>
        </div>
        <div class="bottom_nav">
            <button class="call" (click)='triggerModalInfo(item.submodelId)'>more info</button>
        </div>
    </div>
    <div class="img_container" (click)='triggerModal(item.submodelId)' [ngStyle]="{'background-image': 'url('+ this.env.baseCarsUrl + '/images/cars/'+(item.modelThumbnail | lowercase)+ '/main.jpg'+')'}">
    </div>
    <div class="num">{{i+1}}</div>
</a>

angular hide show onmouseover

0 commentaires

4 Réponses :

0
votes

Vous pouvez y parvenir en utilisant des événements de souris,

Dans votre modèle,

showElement: boolean = true;

Dans votre composant, fort>

<a class="result_row_item" *ngFor="let item of cars; let i = index">
    <div class="about" (mouseenter)="showElement=!showElement" (mouseleave)="showElement=!showElement">
        <div class="mark">
            <b>{{item.manufacturerName}}</b>
        </div>
        <div class="descr">
            <span class="safety_mark">safety mark -<b> {{item.safetyMark}}  </b></span>
            <span class="zaro_to">0-100 <b> {{item.zeroTo100}} </b></span>
        </div>
        <div class="bottom_nav" *ngIf="showElement">
            <button class="call" (click)='triggerModalInfo(item.submodelId)'>more info</button>
        </div>
    </div>
    <div class="img_container" (click)='triggerModal(item.submodelId)' [ngStyle]="{'background-image': 'url('+ this.env.baseCarsUrl + '/images/cars/'+(item.modelThumbnail | lowercase)+ '/main.jpg'+')'}">
    </div>
    <div class="num">{{i+1}}</div>
</a>

0 commentaires

2
votes

il y a un événement appelé mouseenter et mouseleave en angulaire, vous pouvez essayer comme ceci

donc vous pouvez essayer comme ceci

HTML:

   export class component1Component{
     mouseEnter(data : any){
        this.isDisplay= data;
     }

     mouseLeave(data : any){
        this.isDisplay = data;
     }
   }

Composant:

  <a class="result_row_item" *ngFor="let item of cars; let i = index">
<div class="about" (mouseenter)="mouseEnter('true') (mouseleave)="mouseLeave('false')">
    <div class="mark">
        <b>{{item.manufacturerName}}</b>
    </div>
    <div class="descr">
        <span class="safety_mark">safety mark -<b> {{item.safetyMark}}  </b></span>
        <span class="zaro_to">0-100 <b> {{item.zeroTo100}} </b></span>
    </div>
    <div class="bottom_nav" *ngIf="isDisplay">
        <button class="call" (click)='triggerModalInfo(item.submodelId)'>more info</button>
    </div>
</div>
<div class="img_container" (click)='triggerModal(item.submodelId)' [ngStyle]="{'background-image': 'url('+ this.env.baseCarsUrl + '/images/cars/'+(item.modelThumbnail | lowercase)+ '/main.jpg'+')'}">
</div>
<div class="num">{{i+1}}</div>

J'espère que cela vous aidera

2 commentaires

Merci pour ça. en raison du fait que j'ai une liste de voitures qui créent une liste d'éléments, j'ai créé un tableau de valeurs booléennes et les ai initiées à un faux démarrage supérieur, et en entrée de souris et en laissant la souris, j'ai ajouté l'index de l'élément. quelque chose comme ceci:

. Composant: public showElement: Array = []; mouseEnter (data: any, i: any) {this.showElement [i] = true; } mouseLeave (data: any, i: any) {this.showElement [i] = false; }

Oh d'accord. si ma réponse vous aide, ce serait formidable si vous acceptez ma réponse :)

-1
votes

<div class="bottom_nav" [hidden]="!showElement">
    <button class="call" (click)='triggerModalInfo(item.submodelId)'>more info</button>
</div>
It worked for me in Angular 8.

0 commentaires

0
votes

<div class="box" 
  (mouseover)="hideElement = false"
  (mouseleave)="hideElement = true"
  >
    <button [hidden]="hideElement">more info</button>
</div>

hideElement = true;

0 commentaires