我正在尝试使用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字体图标,任何其他图片都可以,比如我正在使用的这些。提前感谢!