将鼠标悬停在所有列表项上,指定的列表项除外

应用组件.ts

  items = {
    name: 'name',
    lang: ['php', 'javascript', 'angular']
  };

应用程序组件.html

<ul>
 <li id="{{item.name}}" class="items" *ngFor="let item of items.lang">{{item}}</li>
</ul>

// 1
.items:not(:first-of-type):hover {
  color: red;
}

// 2
.items:not(:last-of-type):hover {
  color: red;
}

// 3
.items:not(:first-child):hover {
  color: red;
}

// 4
.items:not(:last-child):hover {
  color: red;
}

// 5 by index of item
.items:not(:nth-child(2)):hover {
  color: red;
}

// 6 by index of item
.items:not(:nth-child(3)):hover {
  color: red;
}

按选择器Id

应用组件.ts

items = [
    {
      id: 'php',
      lang: 'php'
    },
    {
      id: 'angular',
      lang: 'angular'
    },
    {
      id: 'css',
      lang: 'css'
    }
  ];

<ul>
    <li id="{{ item.id }}" class="items" *ngFor="let item of items">{{item.lang}}</li>
</ul>

app.component.css或app.component.scss

.items:not(#angular):hover {
  color: red;
}

// Or
.items:not(#php):hover {
  color: red;
}

// Or
.items:not(#css):hover {
  color: red;
}

如果停止悬停取决于具有类的特定元素 disableThis 附加,您只需修改css如下:

.disableThis,
.disableThis:hover {
  background: grey;
  color: white;
}

@图沙尔赢得了这一天,他迅速发表评论说:

选择器应该是.myElement:not(.disableThis):悬停{。假设myElement类应用于所有li元素。

这对我来说很管用,而且在我从中提取代码的更大的项目中也是如此。