CSS - ExtJsを使用してマウスオーバーしているときにパネル上の画像を変更するにはどうすればいいですか？

Question

CSSまたはSASSを使用してmouseover/mouseleaveを実行するときに画像を変更しようとしています。しかし、私は常に行うことができます。このacomplishする：その後、

header = panel.getHeader().getEl(); と、この操作を行います。

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

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

はしかし、私はCSSやSASSを使用して同じ機能を実現しようとしています。基本的には

：

アコーディオンをロードする場合a）のすべての画像がデフォルトで表示されなければなりません。 （画像1がパネル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

注：私は、画像のフォントは素晴らしい使用しない、他の 画像は私が使用しているもののような細かいです。ありがとうございます！

Answer 1

コメントはCSSで無効です（コメントはブロックされています） - 実際に私はこれを見つけ出すまで私の正気について質問しました。

面倒な行のコメントを削除する場合は、あなたがHTMLに見れば、あなたははっきり

.x-panel-header-custom1 

セレクタを上書き

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

セレクタを参照してくださいので、あなたがを使用する必要があります！重要にあなたのコードを動作させたいならば、すべてのクラス。これと同じように：

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

はまた、私はあなたの第3セレクタは、（1崩壊）ヘッダ文字列が欠落していた気づきました。それは、画像を複数回繰り返し示し上にマウスをやっ

Fiddle