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

【问题标题】：angular - Show or Hide button on a div mouseoverangular - 在 div 鼠标悬停时显示或隐藏按钮
【发布时间】：2019-03-20 07:19:34
【问题描述】：

我有一个小角度项目，在数据库中执行搜索操作后显示汽车列表。我想创建一种情况，每当用户将鼠标悬停在 div (<div class="about">) 上时，就会显示按钮 (<button class="call">)，而每当用户离开 div 区域时，相同的按钮就会隐藏。

知道我该怎么做吗？如果这是可能的，当用户使用移动设备时，我该如何做类似的事情？

该列表是从数据库中的搜索动态创建的，因此我无法使用 CSS id 来显示或隐藏它。

<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

【解决方案1】：

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

希望对你有帮助

【讨论】：

谢谢你。由于我有一个创建元素列表的汽车列表，我创建了一个布尔值数组并在启动时将它们初始化为 false，并且在鼠标进入和鼠标离开时我添加了元素的索引。像这样的东西：
。组件：公共 showElement：Array=[]; mouseEnter（数据：任意，我：任意）{ this.showElement[i] = true; } mouseLeave(data: any, i: any) { this.showElement[i] = false; }
哦，好的，知道了。如果我的回答对你有帮助，如果你接受我的回答那就太好了:)

【解决方案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 中对我有用。

【讨论】：