Question

我正在使用Angular 4，我选择mat-card :hover这似乎很好。我在click event添加了mat-card，点击后我希望背景颜色与悬停颜色保持一致，直到另一个项目被点击为止。

  <mat-card>
    <div fxLayout="row" fxLayout.xs="column">
      <div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>Version Number:</span>
      </div>
      <div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>{{version.versionNumber}}</span>
      </div>
    </div>
    <div fxLayout="row" fxLayout.xs="column">
      <div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>User:</span>
      </div>
      <div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>{{version.user}}</span>
      </div>
    </div>
    <div fxLayout="row" fxLayout.xs="column">
      <div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>Created Date:</span>
      </div>
      <div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>{{version.createdDate | date: 'dd/MM/yyyy'}}</span>
      </div>
    </div>
    <div fxLayout="row" fxLayout.xs="column">
      <div class="card-label" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>Start Date:</span>
      </div>
      <div class="card-value" fxFlex.xl="50" fxFlex.lg="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100">
        <span>{{version.startDate | date: 'dd/MM/yyyy'}}</span>
      </div>
    </div>
  </mat-card>

CSS：

mat-card:hover {
    background-color: rgba(42, 63, 84, .2);
}

mat-card:focus {
    background: blue;
}

就像我说的悬停工作正常但是：焦点没有。

Answer 1

是的，因为您可以将焦点事件应用于您可以关注的元素。这例如是输入字段。你无法给予：专注于div容器。

＆＃13;

#somediv:hover {
  background-color: orange;
}

#someinput:focus {
  background-color: blue;
}

＆＃13;

<div id="somediv">Sometext</div>
<input id="someinput">

＆＃13;

查找该代码。单击输入，然后：将应用焦点。

Answer 2

我会在css之外处理这个问题。将click事件添加到主机并将类添加到host元素。

@componet(
host: {
   "(click)": "onClick($event)"
})
export class Foo {
  @HostBinding('class.active') isActive: boolean = false; 
  onClick(e){
   this.isActive = !this.isActive;
  }
}

：悬停选择器工作但是：焦点没有

2 个答案: