小编Shl*_*iSa的帖子

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

我有一个小的角度项目,在数据库中执行搜索操作后显示汽车列表。我想创建一种情况,每当用户将鼠标悬停在 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>
Run Code Online (Sandbox Code Playgroud)

onmouseover show hide angular

7
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

hide ×1

onmouseover ×1

show ×1