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

Question

我正在尝试使用 CSS 或 SASS 在执行 mouseover/mouseleave 时更改图像。然而，为了完成这个我总是可以做到：

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) 鼠标悬停 Image 2 应该显示，鼠标离开 Image 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;
}

此外，我注意到您的第三个选择器（折叠的那个）缺少 header 字符串。

Fiddle

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

How to change image on panel when doing mouseover using CSS - ExtJs?

javascript

css

extjs

sass

extjs5