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

时间:2017-12-14 07:42:43

标签: javascript css extjs sass extjs5

我正在尝试使用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,它在第一个面板上进行鼠标悬停/鼠标保护时有效,但我不确定如何显示图像。

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

1 个答案:

答案 0 :(得分:2)

行注释在CSS中无效(块注释) - 实际上你让我质疑我的理智,直到我发现它。

当删除麻烦的行注释时,如果你查看html,你会清楚地看到

print

选择器覆盖

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

选择器,因此如果您希望代码正常工作,则必须在所有课程中使用!important 。像这样:

.x-panel-header-custom1

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

Fiddle