Question

我有一个小角度项目，在数据库中执行搜索操作后显示汽车列表。我想创建一种情况，每当用户将鼠标移到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>

Answer 1

您可以通过使用鼠标事件来实现，

在您的模板中，

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

Answer 2

有一个名为 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;
     }
   }

我希望它可以帮助您

Answer 3

hideElement = true;

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

Answer 4

service = DRIVE.files().list().execute().get('files', [])
for f in files:
    print(f['name'])

它在Angular 8中对我有用。

angular-div鼠标悬停时显示或隐藏按钮

4 个答案: