Question

我有一个名为recipe-list的组件中使用ngFor创建的列表。所有项目都使用组件配方项构建。我想在焦点上改变特定项目的样式。

这是html：

对于recipe-item-＆gt;

<a
  class="list-group-item clearfix" 
  (click)="onSelected()"
  style="cursor: pointer;">
    <div class="pull-left">
      <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
      <p class="list-group-item-text">{{ recipe.description }}</p>
    </div>
    <span class="pull-right">
        <img src="{{ recipe.imagePath }}" alt="{{ recipe.name }}" class="img-responsive" style="max-height: 50px; border-radius: 50%; width: 60px; Height: 60px;">
    </span>
</a>

用于recipe-list-＆gt;

<div class="row">
  <div class="col-xs-12">
    <button class="btn btn-success">New Recipe</button>
  </div>
</div>
<hr>
<div class="row">
  <div class="col-xs-12">
    <app-recipe-item
    *ngFor="let recipeEl of recipes"
    [recipe]="recipeEl"></app-recipe-item>
  </div>
</div>

我需要更改一个的颜色边框并且仅在焦点上

Answer 1

要获得元素的焦点，您需要添加属性＆＃34; tabindex＆＃34;。

<a tabindex="0" ...>

之后，您可以使用伪类＆＃34;：focus＆＃34;来设置它的样式。使用CSS。

如何使用焦点和焦点与Angular 4

1 个答案: