Angular 如何使用“材质高程”指令在“选择材质”卡上保持悬停状态

我有3个垫子卡，当鼠标与它们交互时，它们会被提升。 目标是在所选mat卡上保持over状态（模式通过

click（）更改）

---

堆栈：

您可以尝试添加一个与元素悬停时具有相同属性的类，并使用click事件将该类添加/删除到元素中

CSS

div.target:hover,
.mouseclick{
    "properties"
}

document.querySelector("div.target").onclick =
function(this){
   if(this.classList.indexof("mouseclick") == -1){
        this.classList.add(".mouseclick");
    }else{
        this.classList.remove(".mouseclick")
    }
}

JS

div.target:hover,
.mouseclick{
    "properties"
}

document.querySelector("div.target").onclick =
function(this){
   if(this.classList.indexof("mouseclick") == -1){
        this.classList.add(".mouseclick");
    }else{
        this.classList.remove(".mouseclick")
    }
}

---

我会使用ngClass。你可以将一个变量绑定到一个css类，并基于该变量进行切换

它看起来像这样：

.html

<mat-card [ngClass]="{'text-success':clicked === 'card1'}" appMaterialElevation (click)="select(titles[0])">
    <mat-card-header>
        <mat-card-title>{{titles[0]}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <p>
            This card changes elevation when you hover over it!
        </p>
    </mat-card-content>
</mat-card>

根据需要对您的卡重复上述操作。只需为单击时所需的样式定义一个css类

---

请在此处查看更多信息：

您好，我已经重构了您的代码，并且可以正常工作。您可以在此处找到堆栈

首先，您必须使用isSelected属性创建类标题，该属性在选择项时会发生更改

如果我重构了html来使用NGF 最后，我添加了一个css类来管理悬停事件

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
默认高程=2；
上升高度=8；
标题：标题[]=[{name:'title1'}，{name:'title2'}，{name:'title3'}]；
选出的标题；
名称='角度'；
选择（标题）{
//清除所有选择
this.titles.map（t=>t.isSelected=false）；
//选择当前项目
title.isSelected=true；
this.titleSelected=标题；
}
}
导出类标题{
名称：字符串；
isSelected？：布尔值；
}

mat卡：悬停{
盒影：0 5px 5px-3px rgba（0,0,0,2），0 8px 10px 1px rgba（0,0,0,14），0 3px 14px 2px rgba（0,0,0,12）；
}

选定的标题：{{titleSelected？.name}

{{item.name}

当你将鼠标悬停在这张牌上时，它会改变高度！

你试过使用ngClass吗？是吗：怎么样？@sowebull看起来很棒！我认为你使用它非常有效。试着使用它，看看你能想出什么。Angular在框架中附带了一个非常方便的小功能。实际上，当你将鼠标悬停在select matcardit上时会出现问题。它会在选定的mat卡已经有其悬停css状态您必须删除以前应用的css类，让我快速检查您的代码，并发现它看起来很棒，我尝试对选定的mat卡进行像素化，但遇到一些问题您能描述一下您遇到的问题吗