CSS를 사용하여 마우스 오버를 할 때 패널의 이미지를 변경하는 방법 - ExtJs?

Question

CSS 또는 SASS를 사용하여 mouseover/mouseleave을 수행 할 때 이미지를 변경하려고합니다.

header = panel.getHeader().getEl(); 를 다음을 수행하십시오 : 그러나, 항상 내가 할 수있는이 acomplish합니다 그러나, 나는 CSS 또는 SASS를 사용하여 동일한 기능을 수행하기 위해 노력하고있어

 //mouse enter event 
     header.on('mouseover', function (e) { 
     ....... 
     ....... 
     }, me); 

     //mouseleave event 
     header.on('mouseleave', function (e) { 
     ........ 
     }, me); 

. 기본적으로

:

아코디언을로드 할 때) 모든 이미지는 기본적으로 표시되어야합니다. (이미지 1이 패널 1에 표시되어야합니다).

b) 패널이 확장 된 경우 이미지 2이 표시되어야하며 축소 된 이미지 1이 표시되어야합니다 (패널 1에서는 다른 패널과 동일한 기능 임). 마우스 오버 이미지 2에서

C))은 표시되어야하는 MouseLeave 및 이미지 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

주이다 : 나는 이미지 글꼴 끝내 사용하지 않으, 다른 이미지는 내가 사용하고있는 것과 같은 정상입니다. 많은 감사드립니다!

Answer 1

라인 주석은 CSS에서 유효하지 않습니다 (블록 주석이 있습니다). 실제로이 사실을 발견 할 때까지 내 정신을 묻습니다. 당신이 HTML로 보면

, 번잡 한 줄 주석을 제거 할 때, 당신은 명확

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

선택이

.x-panel-header-custom1 

선택을 덮어 참조, 따라서 당신은에 ! 중요를 사용해야합니다 코드를 작동 시키려면 모든 클래스가 필요합니다. 그래서 같이 : 또한

.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; 
} 

, 나는 헤더 문자열 누락 세 번째 선택을 (를 붕괴) 알게되었다. 이 이미지를 여러 번 반복 표시를 통해 마우스를하고

Fiddle