Angular 2：使用ngStyle设置悬停属性

Question

我正在尝试使用[ngStyle]设置悬停属性状态。

以下代码仅设置正常状态下的颜色。当我将鼠标悬停在按钮上时，该按钮不会按预期更改为按下颜色。

<button (click)="logout()" 
    class="btn register-button"
    [ngStyle]=" hover ? 
        {'color': theme.logoutButtonColorPressed,
         'border-color': theme.logoutButtonBorderColorPressed,
         'background-color': theme.logoutButtonBackgroundColorPressed}:
        {'color': theme.logoutButtonColorNormal,
         'border-color': theme.logoutButtonBorderColorNormal,
         'background-color': theme.logoutButtonBackgroundColorNormal}"> 
    Logout
</button>

- user2182570

---

这里的 hover 是什么意思 [ngStyle]=" hover {？ - Max Koretskyi

不清楚你想要什么。如果你想在悬停时切换样式，将以下内容添加到按钮中 <button (mouseover)="hover=true" (mouseleave)="hover=false"... - Max Koretskyi

我正在尝试复制CSS.....logout-container button:hover { }希望为按钮的悬停状态设置颜色。我可以使用以下方式手动设置：.logout-container button:hover { color: #FFFFFF !important; background-color: rgba(0, 0, 0, 0.00) !important; border-color: #FFFFFF !important; } - user2182570

你的解决方案非常有效：该解决方案如下：注销 - user2182570

我将其发布为一个答案。如果有帮助，您可以点赞或接受它。 - Max Koretskyi

我能为我的答案添加什么吗？ - Max Koretskyi

Answer 1

如果你想在鼠标悬停时切换样式，将以下代码添加到按钮中。

<button (mouseover)="hover=true" (mouseleave)="hover=false"...

- courses.indepth.dev

Answer 2

如果您需要通过更改ngstyle来选择单个按钮，这是我所做的。

btn.component.html

<div *ngIf="socketData && socketData.status === 'ok'">
    <div *ngFor="let button of socketData.message; let i = index"
         [ngStyle]="hovered === i ? pressedStyle(button) : buttonStyle(button)"
         (mouseover)="hovered = i"
         (mouseout)="hovered = -1"
         (click)="reqTicket(button.id)">

      {{button.someImportantData}} - {{button.yetMoreImportantData}}
  </div>
</div>

btn.component.ts

export class ButtonComponent implements OnInit {
    style;
    hovered;

    ...

    private buttonStyle(button) {
        let btnType = this.setBtnType(button);

        this.style = {
            'color': '#' + button.textColor,
            'font-size': button.textSize + 'px',
            'background-color': btnType.background
        };
        return this.style;
    }

    private pressedStyle(button) {
        let pressed = this.setBtnType(button, this.hovered);
        this.style['background-color'] = pressed.background;

        return this.style;
    }

    private setBtnType(button, hovered?) {
        let type = 'normal';
        let btn = {
            normal: {
                background: '#' + button.backColor,
            },
            pressed: {
                background: '#' + button.backColor,

            }
        }

        if(hovered > -1) type = 'pressed';

        return {
            border: btn[type].width + ' ' + btn[type].color + ' ' + 'solid',
            background: btn[type].background
        };
    }

}

希望这对某人有所帮助 :)

- Rip3rs

---

我使用了这个的变体，但是在我的模型中添加了hover属性，因为我没有将每个项目作为单独的组件。 - jackofallcode

Answer 3

:hover 是伪类，不能使用 style 添加。您应该使用 CSS 和 ngClass 或 [class.xxxx]=".."。

- kemsky

---

为什么你认为他想设置:hover？我在想他想要在鼠标悬停时更改按钮样式。 - Max Koretskyi

按钮具有超过2个状态：正常、悬停、聚焦、禁用、活动。当前使用 ngStyle 的方法最终会失败。 - kemsky

Answer 4

这篇文章https://css-tricks.com/css-attr-function-got-nothin-custom-properties/给了我正确的方向...

<button class="btn register-button" [ngStyle]="styles"></button>

.register-button {
    color: var(--register-button--color, #999);
    background-color: var(--register-button--background-color, transparent);

    :hover {
        color: var(--register-button--hover-color, #555);
        background-color: var(--register-button--hover-background-color, rgba(0, 0, 0 / 10%);
    }
}

    get styles(): Record<string, string> {
        return {
            '--register-button--color': this.configuration?.color || 'red',
            '--register-button--background-color': this.configuration?.backgroundColor || 'black',
            '--register-button--hover-color': this.configuration?.hoverColor || 'blue',
            '--register-button--hover-background-color': this.configuration?.hoverBackgroundColor || 'gray',
        };
    }

诀窍在于使用可以由ngStyle设置的CSS变量。不错！

- PhiLho

---

太好了，谢谢！干净而强大的解决方案。 - Chris

Answer 5

我能够在html中使用[style.backgroundColor]，同时在css中使用:not(:hover)。

  <label
    *ngFor="let item of items"
    [style.backgroundColor]="item.color">
    {{ item.name }}
  </label>


label:not(:hover) {
  background: transparent !important;
}

- Matera