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

#angular #hide #show #onmouseover

#angular #скрыть #показать #onmouseover

Вопрос:

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

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

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

Ответ №1:

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

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

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

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

1. спасибо вам за это. из-за того, что у меня есть список машин, которые создают список элементов, я создал массив логических значений и инициировал их в false при запуске, а при вводе мышью и оставлении мыши я добавил индекс элемента. что-то вроде этого: <div class=»about» (mouseenter)=»mouseEnter(‘true’, i)» (mouseleave)=»mouseLeave(‘false’, i)»>. Компонент: общедоступный showElement: Array<Boolean>=[]; mouseEnter(данные: любые, i: any) { this. showElement[i] = true; } mouseLeave(данные: любые, i: any) { это. showElement[i] = false; }

2. Ооо, ладно, понял. если мой ответ вам помог, было бы здорово, если бы вы приняли мой ответ 🙂

Ответ №2:

 hideElement = true;

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

Ответ №3:

Вы можете достичь этого с помощью событий мыши,

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

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

Ответ №4:

 <div class="bottom_nav" [hidden]="!showElement">
    <button class="call" (click)='triggerModalInfo(item.submodelId)'>more info</button>
</div>

У меня это сработало в Angular 8.