How to change image on panel when doing mouseover using CSS - ExtJs?

问题

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

标签

javascript

css

extjs

Sass

extjs5