css - :hover selector works but :focus does not

Question

我正在使用 Angular 4，我选择了 :hover 的 mat-card，这看起来不错。我在 mat-card 中添加了一个 click 事件，点击时我希望背景保持与悬停颜色相同的颜色，直到另一个元素被点击。

  <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;
}

就像我说的悬停效果很好但 :focus 不行。

Answer 1

是的，因为您可以将焦点事件应用到您可以关注的元素上。例如，这是一个输入字段。你不能给 :focus 一个 div 容器。

#somediv:hover {
  background-color: orange;
}

#someinput:focus {
  background-color: blue;
}

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

寻找那个代码。单击输入，然后将应用 :focus。