Wie ändert man das Bild im Panel, wenn man mit CSS - ExtJs mouseover macht?

Question

Ich versuche, Bilder zu ändern, wenn Sie mouseover/mouseleave mit CSS oder SASS tun. dies jedoch zu erledige ich kann immer tun:

header = panel.getHeader().getEl(); und dann wie folgt vorgehen:

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

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

aber ich versuche, die gleiche Funktionalität mit CSS oder SASS zu erreichen.

Grundsätzlich gilt:

a) Alle Bilder sollten standardmäßig angezeigt werden, wenn das Akkordeon zu laden. (Image 1 sollte für Panel 1 angezeigt werden).

b) Wenn das Panel erweitert wird Image 2 sollte angezeigt werden und ist das minimierte Bild 1 sollte angezeigt werden (auf Panel 1 - gleiche Funktionalität für die anderen Panels).

c) der Maus darüber Bild 2 sollte und auf mouseleave Bild 1 sollte 1) (auf Tafel angezeigt werden angezeigt.

Das ist das CSS, das ich bis jetzt benutze und es funktioniert auf dem ersten Panel, wenn ich mouseover/mouseleave, aber ich bin nicht wirklich sicher, wie die Bilder angezeigt werden.

// 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'); 
} 

Kann mir jemand sagen, was ich vermisse?

Hier ist der ArbeitsFIDDLE

Hinweis: Ich mag nicht für die Bilder Font genial verwenden, andere Bilder sind in Ordnung wie die, die ich verwende. Vielen Dank im Voraus!

Answer 1

Zeilenkommentare sind in CSS nicht gültig (Blockkommentare sind) - Sie haben mich tatsächlich in Frage gestellt, bis ich das erkannt habe.

Wenn die lästigen Linie Kommentare zu entfernen, wenn Sie in den HTML-Code aussehen, sehen Sie deutlich

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

Wähler die

.x-panel-header-custom1 

Wähler zu überschreiben, und deshalb müssen Sie verwenden ! Important auf alle Ihre Klassen, wenn Sie möchten, dass Ihr Code funktioniert. Wie so:

.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; 
} 

Auch bemerkte ich Ihren dritten Selektor (eine kollabierte) fehlte der Header String.

Fiddle