gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 21:47:04 27 4
gpt4 key购买 nike

在 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() 特性,但是我找不到一种方法让它与数据插值一起工作。

即:

.myElement:hover:not({{listItem.name}}) {
background: green;
color: white;
}

最佳答案

app.component.ts

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

app.component.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;
}

通过选择器 ID


app.component.ts

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

app.component.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;
}

关于javascript - 将鼠标悬停在所有列表项上,指定项除外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53044282/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com