angular - Показать или Скрыть кнопку при наведении курсора мыши - PullRequest
Новая
       15

angular - Показать или Скрыть кнопку при наведении курсора мыши

0 голосов
/ 20 марта 2019

У меня небольшой угловой проект, который отображает список автомобилей после выполнения поискового действия в БД. Я хочу создать ситуацию, когда всякий раз, когда пользователь наводит указатель мыши на элемент div (<div class="about">), отображается кнопка (<button class="call">), и всякий раз, когда пользователь покидает область элемента div, эта же кнопка скрывается.

Есть идеи, как мне это сделать? Если это возможно, как я могу сделать нечто подобное, когда пользователь использует мобильное устройство?

Список создается динамически из поиска в БД, поэтому я не могу использовать идентификатор CSS, чтобы показать или скрыть его с помощью 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>

Ответы [ 2 ]

0 голосов
/ 20 марта 2019

есть событие под названием mouseenter и mouseleave in angular, вы можете попробовать вот так

так что вы можете попробовать вот так

HTML: 

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

Компонент: 

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

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

Я надеюсь, что это поможет вам

0 голосов
/ 20 марта 2019

Этого можно добиться, используя события мыши,

В вашем шаблоне 

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

В вашем компоненте 

showElement: boolean = true;
...