嘿，这个问题我熟！你遇到的是ExtJS默认的按钮悬停样式把你自定义的蓝色背景给覆盖了，下面给你几个实用的解决办法：

方案1：用高优先级CSS覆盖默认样式 #

ExtJS会给悬停状态的按钮自动添加特定的CSS类（比如.x-btn-over，不同版本类名可能略有差异，你可以按F12打开浏览器开发者工具查看元素的类名）。我们可以写一个优先级更高的CSS规则来锁定背景色：

/* 给你的按钮加个自定义类，精准定位 */
.custom-info-btn.x-btn-over {
    background-color: #0099ff !important;
    /* 去掉默认的hover渐变效果，让颜色更纯净 */
    background-image: none !important;
}

然后在创建按钮时，给它加上cls: 'custom-info-btn'属性：

new Ext.Button({
    text: '<div style="color: white">INFORMA</div>',
    cls: 'custom-info-btn', // 新增自定义类
    style: { 
        'background-color': '#0099ff', 
        'border-radius': '5px', 
        'padding-left': '5px', 
        'padding-right': '5px', 
        'padding-top': '1px', 
        'padding-bottom': '1px' 
    },
    handler : function() {  
        // 你的处理逻辑
    }
})

方案2：直接在按钮配置中禁用默认hover类 #

有些ExtJS版本支持直接清空悬停时的样式类，这样默认的灰色就不会生效了。你可以试试在按钮配置里添加overCls: ''：

new Ext.Button({
    text: '<div style="color: white">INFORMA</div>',
    style: { 
        'background-color': '#0099ff', 
        'border-radius': '5px', 
        'padding-left': '5px', 
        'padding-right': '5px', 
        'padding-top': '1px', 
        'padding-bottom': '1px' 
    },
    overCls: '', // 清空悬停样式类
    handler : function() {  
        // 你的处理逻辑
    }
})

这个方法的兼容性要看你使用的ExtJS版本，老版本可能需要调整其他属性，但大部分情况下overCls清空就管用。

方案3：用ExtJS动态样式工具全局/局部修改 #

如果你不想单独写CSS文件，可以用ExtJS自带的Ext.util.CSS来动态生成样式规则：

// 在页面初始化或者按钮创建前执行这段代码
Ext.util.CSS.createStyleSheet(`
    .custom-info-btn.x-btn-over {
        background-color: #0099ff !important;
        background-image: none !important;
    }
`, 'custom-btn-hover-style');

这个方法和方案1原理一致，只是把CSS写在了JS里，适合需要动态调整样式的场景。

最后提醒下：如果还是没生效，记得用浏览器开发者工具看看hover状态下按钮的CSS规则，看看默认样式的优先级是不是比你的自定义样式高，针对性地调整就行。

内容的提问来源于stack exchange，提问作者pighfs