问题
I'm trying to change images when doing mouseover/mouseleave using CSS or SASS. However, to acomplish this I can always do:
header = panel.getHeader().getEl(); and then do this:
//mouse enter event
header.on('mouseover', function (e) {
.......
.......
}, me);
//mouseleave event
header.on('mouseleave', function (e) {
........
}, me);
However, I'm trying to accomplish the same functionality using CSS or SASS.
Basically:
a) All images should be displayed by default when loading the accordion. (Image 1 should be displayed for panel 1).
b) If panel is expanded Image 2 should be displayed and is its collapsed Image 1 should be displayed (on panel 1 - same functionality for the other panels).
c) On mouseover Image 2 should be displayed and on mouseleave Image 1 should be displayed (on panel 1).
This is the CSS I'm using so far and it works on the first panel when doing a mouseover/mouseleave, but I'm not really sure how to get the images to be displayed.
// 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');
}
Can anyone tell me what i'm missing?
Here's the working FIDDLE
Note: I don't want to use Font awesome for the images, any other images are fine like the ones I'm using. Thanks a lot in advance!
回答1:
Line comments are not valid in CSS (Block comments are) - you actually had me questioning my sanity until I spotted this.
When removing the troublesome line comments, if you look into the html, you clearly see
.x-accordion-item .x-accordion-hd
selector overwriting the
.x-panel-header-custom1
selector, and therefore you must use !important on all your classes, if you want your code to work. Like so:
.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;
}
Also, I noticed your third selector ( collapsed one ) was missing the header string.
Fiddle
来源:https://stackoverflow.com/questions/47808220/how-to-change-image-on-panel-when-doing-mouseover-using-css-extjs