Javascript 当我跨过按钮时，它会变成灰色 newext.按钮({ 文本：“INFORMA” ，款式：{ “背景色”：“0099ff”， “边界半径”：“5px”， “左填充”：“5px”， “右边填充”：“5px”， “填充顶部”：“1px”， “填充底部”：“1px” } ，handler:function（）{ ..... ... } })

我遇到的问题是，当我把鼠标放在按钮上时，它会变成灰色，我希望它保持原来的颜色，蓝色。我怎样才能修好它

在鼠标到达顶部之前：

当鼠标位于顶部时：

---

以下覆盖将删除鼠标悬停颜色：

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'
   }
    ,handler : function() {
        .....
        ...
    }
})

Ext.define（'Override.Button'{
覆盖：“Ext.Button”，
onMouseOver：函数（e）{
如果（！this.disabled）{
var internal=e.inthein（this.el，true）；
如果（！内部）{
//此.el.addClass（'x-btn-over'）；
如果（！this.monitoringMouseOver）{
this.doc.on（'mouseover'，this.monitorMouseOver，this）；
this.monitoringMouseOver=true；
}
this.firevent（'mouseover'，this，e）；
}
if（此.isMenuTriggerOver（e，内部））{
this.firevent（'menutriggerover'，this，this.menu，e）；
}
}
},
//私人的
onMouseOut：函数（e）{
var internal=e.within（this.el）和&e.target！=this.el.dom；
//此.el.removeClass（'x-btn-over'）；
this.firevent（'mouseout'，this，e）；
if（此.isMenuTriggerOut（e，内部））{
this.firevent（'menutriggerout'，this，this.menu，e）；
}
}
});
新的分机按钮({
文本：“INFORMA”，
风格：{
“背景色”：“0099ff”，
“边界半径”：“5px”，
“左填充”：“5px”，
“右边填充”：“5px”，
“填充顶部”：“1px”，
“填充底部”：“1px”
},
renderTo:Ext.getBody（），
处理程序：函数（）{}
})

---

或者您可以更改“.x-btn-over”CSS类。

我就是这样解决的，因为Ext.define无法工作，这要感谢@Arthus Rubens的代码：

Ext.define('Override.Button', {
    override: 'Ext.Button',
    onMouseOver: function (e) {
        if (!this.disabled) {
            var internal = e.within(this.el, true);
            if (!internal) {
                //this.el.addClass('x-btn-over');
                if (!this.monitoringMouseOver) {
                    this.doc.on('mouseover', this.monitorMouseOver, this);
                    this.monitoringMouseOver = true;
                }
                this.fireEvent('mouseover', this, e);
            }
            if (this.isMenuTriggerOver(e, internal)) {
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

    // private
    onMouseOut: function (e) {
        var internal = e.within(this.el) && e.target != this.el.dom;
        //this.el.removeClass('x-btn-over');
        this.fireEvent('mouseout', this, e);
        if (this.isMenuTriggerOut(e, internal)) {
            this.fireEvent('menutriggerout', this, this.menu, e);
        }
    }
});

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'
    },
    renderTo: Ext.getBody(),
    handler: function () {}
})

调用handleMouseEvents的第二种方法：false

Ext.override(Ext.Button,{
    onMouseOver: function (e) {
        if (!this.disabled) {
            var internal = e.within(this.el, true);
            if (!internal) {
                if (!this.monitoringMouseOver) {
                    this.doc.on('mouseover', this.monitorMouseOver, this);
                    this.monitoringMouseOver = true;
                }
                this.fireEvent('mouseover', this, e);
            }
            if (this.isMenuTriggerOver(e, internal)) {
                this.fireEvent('menutriggerover', this, this.menu, e);
            }
        }
    },

    onMouseOut: function (e) {
        var internal = e.within(this.el) && e.target != this.el.dom;
        this.fireEvent('mouseout', this, e);
        if (this.isMenuTriggerOut(e, internal)) {
            this.fireEvent('menutriggerout', this, this.menu, e);
        }
    }
});

newext.按钮({
文本：“INFORMA”，
handleMouseEvents:false
，款式：{
“背景色”：“0099ff”，
“边界半径”：“5px”，
“左填充”：“5px”，
“右边填充”：“5px”，
“填充顶部”：“1px”，
“填充底部”：“1px”
},
renderTo:Ext.getBody（），
处理程序：函数（）{}
})

It's not works for me:/可否告诉我您使用的extjs版本和工具包？我使用的是extjs 3.4。0@pighfs我已经为v3.4编辑了这篇文章，谢谢你的回答，但是Extjs 3.4没有Ext.define我不知道为什么它会这样做，但是你可以用自定义的“ui”更改颜色（悬停、聚焦、选择）。此外，如果你能把它放在小提琴里，别人会很容易帮助你。您使用的EXTJS的版本和版本以及工具包（经典或现代）？这只是一个按钮。我使用的是经典的extjs（3.4.0）

new Ext.Button({
    text: '<div style="color: white">INFORMA</div>',
    handleMouseEvents:false
    ,style: {
        'background-color': '#0099ff',
        'border-radius': '5px',
        'padding-left': '5px',
        'padding-right': '5px',
        'padding-top': '1px',
        'padding-bottom': '1px'
    },
    renderTo: Ext.getBody(),
    handler: function () {}
})