View Full Version : Ext.button hover style

simone dalmasso
21 Oct 2010, 11:42 PM
Hi list,
I would like to change the default style of the hover event on a ext.button in a toolbar.
I tried adding an overCls and even to redefine the x-btn.over style in my css but nothing changes with these solutions.
My code Is:
zoomBox: {
tooltip: 'Zoom to selected box',
tooltipType: 'title',
enableToggle: true,
toggleGroup: 'panZoom',
control: 'zoomBox',
iconCls: 'pan',
cls: 'tool-btn',
overCls: 'pan-hover',
and the css:
background: url(../img/button_bg_hover.png) no-repeat !important;
With firebug i can see the class added to the button and even the css loaded correctly.
Thanks for your help.

22 Oct 2010, 1:52 AM
But Ext.Button already adds a x-btn-over class to the element. Can't you use that (in combination with your current cls)?

simone dalmasso
22 Oct 2010, 2:20 AM
Yes, actually I tried:
background: url(../img/button_bg_hover.png) no-repeat !important;
firebug shows me that this style is the first of the applied in the list but the hover effect doesn't change.

22 Oct 2010, 2:57 AM
No, don't use .pan-hover at all. Just base your css rules off .tool-btn, e.g.

.tool-btn .x-btn-tl,
.tool-btn .x-btn-tr,
.tool-btn .x-btn-tc,
.tool-btn .x-btn-ml,
.tool-btn .x-btn-mr,
.tool-btn .x-btn-mc,
.tool-btn .x-btn-bl,
.tool-btn .x-btn-br,
.tool-btn .x-btn-bc{
(and have a look at how the current images/default/button/btn.gif looks)

simone dalmasso
22 Oct 2010, 6:03 AM
Thanks a lot. I have understood how it works.
For the over effect I've used:
.x-btn-over .x-btn-mc{
background: url(../img/button_bg.png) no-repeat !important;