Angular 2：使用ngStyle設置懸停屬性

我嘗試使用[ngStyle]設置懸停屬性狀態。以下僅設置正常的狀態顏色。當我將鼠標懸停在按鈕上時，該按鈕不會按預期方式更改爲按下的顏色。Angular 2：使用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>

來源

2017-02-18 user2182570

什麼是'懸停'這裏'[ngStyle] =「懸停{' ？ –

目前尚不清楚你想要什麼。如果你想切換懸停樣式，請將以下內容添加到按鈕'

我試圖複製CSS .. .. .logout-container button：hover { } 希望爲懸停狀態設置按鈕的顏色。我可以使用 .logout-container button：hover {顏色：#FFFFFF！important; background-color：rgba（0，0，0，0.00）！重要; border-color：#FFFFFF！important; } – user2182570

:hover是僞類，它可以不使用style加入。您應該使用CSS和ngClass或[class.xxxx]=".."。

來源

2017-02-18 20:09:53 kemsky

你爲什麼認爲他想設置'：hover'？我想他想更改按鈕懸停時的樣式 –

按鈕有兩種以上的狀態：正常，懸停，聚焦，禁用，活動。 'ngStyle'最終會失敗。 – kemsky

如果你想打開hover樣式，添加以下按鈕

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

來源

2017-02-19 06:27:46

如果您需要通過改變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 
     }; 
    }

}

希望這可以幫助別人:)

來源

2017-08-04 11:23:26

Angular 2：使用ngStyle設置懸停屬性

回答

相關問題