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

Question

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

4

我正在尝试使用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）在鼠标悬停时，应显示图像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'); 
}

有人能告诉我错过了什么吗？

以下为工作代码：FIDDLE

注：我不想使用Font awesome字体图标，任何其他图片都可以，比如我正在使用的这些。提前感谢！

- HenryDev

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tehabstract · Accepted Answer

在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字符串。示例代码