Question

美好的一天，

如何仅在特定li悬停时应用方法。

代码示例：

app.component.ts

changeStyle(event) {
      this.colorMe = event.type == 'mouseover' ? 'imRed' : 'imBlue';
  }

app.component.html

<ul class="nav">
  <li (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
    <b [ngClass]="colorMe">
      Color Me
    </b>
  </li>
  <li (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
    <b [ngClass]="colorMe">
      Color Me
    </b>
  </li>
  <li (mouseover)="changeStyle($event)" (mouseout)="changeStyle($event)">
    <b [ngClass]="colorMe">
      Color Me
    </b>
  </li>
</ul>

CSS

.imRed{
  color: red;
}
.imBlue{
  color: blue;
}

这里发生的事情是当我悬停特定的<li>所有<li>都是彩色的时候。而我只希望在悬停时为特定的<li>着色。

Answer 1

您遇到的问题是，您只有一个colorMe变量，每个li都依赖于该变量。但是，任何解决方案都是过度工程，而你可以在没有任何＆＃34;代码的情况下解决这个问题。下面的内容应该可以解决问题（只使用CSS）。

<强> app.component.html

<ul class="nav">
  <li class="hover">
    <b>
      Color Me
    </b>
  </li>
  <li class="hover">
    <b>
      Color Me
    </b>
  </li>
  <li class="hover">
    <b>
      Color Me
    </b>
  </li>
</ul>

CSS

.hover b {
  color: blue;
}

.hover:hover b {
  color: red;
}

Angular 2 Hover特别列表

1 个答案: