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

Posted 2021-05-06

我正在尝试使用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，任何其他图像都很好，就像我正在使用的那样。非常感谢提前！

答案

行注释在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;
}

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

Fiddle