使用CSS - ExtJs進行鼠標懸停時如何更改面板上的圖像？

Question

我正在嘗試使用CSS或SASS進行鼠標懸停/鼠標切換時更改圖像。 但是，為了完成這一點，我總能做到：

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，在鼠標左鍵上應顯示圖像1 （在面板1上）。

這是我到目前為止使用的CSS，它在鼠標懸停/鼠標離開時在第一個面板上工作，但我不確定如何顯示圖像。

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

另外，我注意到你的第三個選擇器（折疊了一個）缺少標題字符串。

小提琴