时间戳

首页 > 解决方案 > 如何在鼠标悬停在角度 6 中的另一个按钮/卡上时取消选择选定的卡/按钮？

html - 如何在鼠标悬停在角度 6 中的另一个按钮/卡上时取消选择选定的卡/按钮？

问题描述

我有一个页面，其中有很多链接。像项目1，项目2，项目3..

在点击链接时，

 <a href="http://localhost:4200/#/dashboard;solution=project1;"/>
 <a href="http://localhost:4200/#/dashboard;solution=project2;"/>
 <a href="http://localhost:4200/#/dashboard;solution=project3;"/>

因此，在下一个仪表板页面中，我将显示所有项目。因此，如果我选择“project1”，则从第一页开始，在下一个仪表板页面（我显示所有项目的地方）Project1 将突出显示（颜色更改）。

  <div class="thumbnail"  [ngStyle]="{'background-color':project1Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" >
  <img src="/assests/img1"/>Project1
  </div>

   <div class="thumbnail"  [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
  <img src="/assests/img2"/>Project2
  </div>
 <div class="thumbnail"  [ngStyle]="{'background-color':project2Flag == true?'orange':(hlsFlag != true ? '0px solid black':null)}" (click)="mouse(e);">
  <img src="/assests/img3"/>Project3
  </div>

在我的 ts 文件中，我根据路由参数设置项目标志 true 或 false。现在我的问题是，如果我将鼠标悬停在仪表板页面中的其他项目上，则不应突出显示突出显示的项目。

  mouse( e){
    console.log("etype :");
    this.project1Flag = false;
    }

所以这里的标志设置为 false & all，但突出显示（颜色更改）仍然应用于 project1。谁能帮我解决这个问题？

标签： htmlcssangularangular6

解决方案

您正在使用click事件并期望悬停应该起作用。那肯定行不通。改为使用(mouseenter)="mouse($event)"。

推荐阅读