[英]Apply hover over all list items, except one that is specified
在 Angular 2+ 中,是否有任何方法可以按照 Angular 代码的规定在列表项上停止悬停 CSS 功能?
我在这里有一个stackblitz来展示我正在谈论的一个简单的例子。
我正在使用ngClass
功能将样式动态应用于当时选择的任何列表项,因为这会发生变化(在任何时候只会选择一项)。
<ul>
<li id="{{item.name}}" *ngFor="let item of list" [ngClass]="{disableThis: item.selected}">{{item.name}}</li>
</ul>
我已经研究了 CSS 应用程序的 :not() 特性,但是我找不到一种方法来让它与数据插值一起工作。
IE:
.myElement:hover:not({{listItem.name}}) {
background: green;
color: white;
}
app.component.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>
app.component.css 或 app.component.scss
// 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;
}
app.component.ts
items = [
{
id: 'php',
lang: 'php'
},
{
id: 'angular',
lang: 'angular'
},
{
id: 'css',
lang: 'css'
}
];
应用程序组件.html
<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;
}
@Tushar 以简短的评论赢得了这一天:
选择器应该是 .myElement:not(.disableThis):hover {。 假设 myElement 类应用于所有 li 元素。
这对我有用,也适用于我从中提取代码的较大项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.