Javascript 使用CSS-ExtJs进行鼠标悬停时，如何更改面板上的图像？

我试图在使用CSS或SASS执行mouseover/mouseleave操作时更改图像。然而，为了完成这一点，我可以：

然后执行以下操作：

        //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，它在执行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'); 
}

谁能告诉我我错过了什么

这是工作流程

注意：我不想在图像上使用令人敬畏的字体，任何其他字体

---

图像很好，就像我正在使用的图像一样。提前多谢

行注释在CSS中是无效的（块注释是无效的）-你实际上让我质疑我的理智，直到我发现这一点

当删除麻烦的行注释时，如果查看html，您可以清楚地看到

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

选择器覆盖

.x-panel-header-custom1

选择器，因此必须使用！重要信息如果您希望代码正常工作，请在所有类上使用。像这样：

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

另外，我注意到您的第三个选择器（折叠的选择器）缺少标题字符串

---

@TechAbstraCt在其上使用鼠标时，会显示重复多次的图像。有没有办法解决这个问题？是的，当然，只需添加背景重复：无重复；我试着重复背景：不重复；但是它不起作用——因为选择器崩溃了！重要是必要的，所以我把它加在了两者中。我明白了，很好。再次非常感谢！！