禁用离子按钮 Ionic 2 上的悬停背景颜色更改答案

【问题标题】：Disable hover background color change on ion-button Ionic 2禁用离子按钮 Ionic 2 上的悬停背景颜色更改
【发布时间】：2018-05-10 17:38:30
【问题描述】：

我有三个按钮。其中两个已通过 ngClass 更改了背景颜色。当我将鼠标悬停在其中一个已更改的按钮上时，它的背景颜色会变回默认值。如何防止这种行为？

我的图片问题：

下面没有悬停图片：

左上图悬停在下方：

【问题讨论】：

【解决方案1】：

首先，您需要为按钮添加一个类

 <button ion-button  class="my-button">AS</button>

然后，您可以在 CSS 中为按钮悬停设置颜色：

.my-button:hover{
    background-color: orange !important;
}

【讨论】：

【解决方案2】：

您也可以使用Ionic Sass Variables。

对于您的情况，覆盖三个变量就足够了：

$button-ios-background-color-hover: your_color;
$button-wp-background-color-hover: your_color;
$button-md-background-color-hover: your_color;

在文件“theme/variables.scss”中

【讨论】：

【解决方案3】：

使用 !important 关键字它会起作用例如

<button type="submit" class="btn2" (click)="openTabs()" ion-button block>U0 
-2-4 Rue  du Nord</button>

// css代码在这里 //

.btn2:hover{
    background: #538455 !important;
}

【讨论】：

【解决方案4】：

运行 ionic-angular 版本 3.9.2，我能够使用 ionic 类 disable-hover 禁用按钮悬停

【讨论】：