How to change the image on the panel on hover using CSS - ExtJs?

Question

I am trying to change images while doing mouseover / mouseleave using CSS or SASS. However, to accomplish this, I can always:

header = panel.getHeader (). getEl ();  and then do the following:

        //mouse enter event
        header.on('mouseover', function (e) {
       .......
       .......
       }, me);

        //mouseleave event
        header.on('mouseleave', function (e) {
        ........
        }, me);

However, I am trying to accomplish the same functionality using CSS or SASS .

Basically:

a) All images should be displayed by default when loading the accordion. ( Image 1 should be displayed for panel 1).

b) , 2 1 ( 1 - ).

c) 2 mouseleave 1 ( 1).

CSS, , mouseover/mouseleave, , .

// Show IMAGE 1 by default
.x-panel-header-custom1{ 
url('http://www.iconhot.com/icon/png/brush-intense-messenger/256/msn-web-
2.png');
}

// SHOW IMAGE 2 when expanded or onmouseover
.x-panel-header-custom1:hover{
 background: red;
background-image: 
 url('https://image.flaticon.com/icons/png/128/12/12195.png'); 
}

- , ?

FIDDLE

: Font awesome ,   , , . !

Answer 1

CSS ( ) - , .

, html,

.x-accordion-item .x-accordion-hd

.x-panel-header-custom1

! important , , . :

.x-panel-header-custom1 {
 background-image: url('http://www.iconhot.com/icon/png/brush-intense-messenger/256/msn-web-2.png') !important;
}

.x-panel-header-custom1:hover {
  background: red;
 background-image: url('https://image.flaticon.com/icons/png/128/12/12195.png') !important; 
}

.x-panel-header-custom1-collapsed {
  background-image: url('https://image.flaticon.com/icons/png/128/12/12195.png') !important;
}

, , ( ) .

Fiddle