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

Question

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!

tehabstract · Accepted Answer · 2017-12-14T20:35:00.220

2

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

edited Dec 14 '17 at 20:35

answered Dec 14 '17 at 20:08

tehabstract

529
6
14

@TechAbstraCt when doing a mouse over it shows the image repeated multiple times. Is there a way to fix that? – HenryDev Dec 14 '17 at 20:32
Yeah, sure just add *background-repeat: no-repeat;* to the style. – tehabstract Dec 14 '17 at 20:33
I tried doing background-repeat: no-repeat; but it doesn't work – HenryDev Dec 14 '17 at 20:34
http://jsfiddle.net/1Lcw0vjq/9/ - For collapsed selector **!important** is necessary, so I added it to both. – tehabstract Dec 14 '17 at 20:37
one more thing that is missing is that if the panel is expanded the image(the one with red background color) should be displayed. Any ideas how to fix that? Thank you so much! – HenryDev Dec 14 '17 at 20:45
Oh wait I misread your question, let me fix you up with a selector for expanded panel – tehabstract Dec 14 '17 at 20:52
So, a selector for only expanded panel would be *.x-panel-header-custom1:not(.x-collapsed)* - [Fiddle](http://jsfiddle.net/1Lcw0vjq/10/) – tehabstract Dec 14 '17 at 20:58
@TecAbstractCt The mouseover is not working anymore. I want the mouseover/mouseleave and the expanded functionality to work at the same time. – HenryDev Dec 14 '17 at 21:01
http://jsfiddle.net/1Lcw0vjq/11/ - I think these selectors should cover everything you want - **NOTE** I changed the images, same image when expanded and collapsed respectively, just changing the color. – tehabstract Dec 14 '17 at 21:08
Btw you should use *backgorund-color* instead of background, and then the same result would be done with this : http://jsfiddle.net/1Lcw0vjq/12/ by inheriting from the parent selector (:hover is a pseudo-selector). When using *background* it **resets** all the properties it inherited from the parent. Read [this](https://stackoverflow.com/questions/10205464/what-is-the-difference-between-background-and-background-color) question. – tehabstract Dec 14 '17 at 21:13
one quick question. I will need to do the same for the other panels too. Would you suggest to copy and paste the same functionality for each panel or is there a better way to do it without doing a lot of copy and paste? – HenryDev Dec 14 '17 at 21:23
Glad to help! If you want the same functionality, completely same, just change *ui* to *custom1* on every item, it gives them the same class. – tehabstract Dec 14 '17 at 21:28
Yes, I want the same functionality for all the other panels, BUT the images will be different. Is there a short way to deal with multiple panels without having to copy and paste the same code over and over? – HenryDev Dec 14 '17 at 21:34
You can use the *nth-of-type* selector, but you're not gaining much. If you want the different images use the approach you're using now. If you have some common styles you can add *cls* to each item and put the common styles on the *cls* value selector. – tehabstract Dec 14 '17 at 21:36
1

I see, perfect. Thanks a lot again!! – HenryDev Dec 14 '17 at 21:38

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

1 Answers1

Linked