使用CSS - ExtJs进行鼠标悬停时如何更改面板上的图像？ [英] How to change image on panel when doing mouseover using CSS - ExtJs?

问题描述

我正在尝试使用CSS或SASS执行 mouseover / mouseleave 时更改图像。但是，为了完成这一点，我总是这样做：

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（）;
然后执行以下操作：

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

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

但是，我正在尝试使用 CSS或SASS 。

However, I'm trying to accomplish the same functionality using CSS or SASS.

基本上：

a）加载手风琴时，默认情况下应显示所有图像。 （面板1应显示图片1 ）。

a) All images should be displayed by default when loading the accordion. (Image 1 should be displayed for panel 1).

b）如果面板展开图片2 应该是显示并且是折叠的图像1应该显示（在面板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）鼠标悬停图像2 应显示并在鼠标左键图像1
应显示（在面板1上）。

c) On mouseover Image 2 should be displayed and on mouseleave Image 1 should be displayed (on panel 1).

这是CSS我'到目前为止使用它并在鼠标悬停/鼠标保存时在第一个面板上工作，但我不确定如何显示图像。

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?

这是工作 FIDDLE

注意：我不想对图片使用Font awesome，其他任何
图像很好，就像我正在使用的那样。非常感谢提前！

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!

推荐答案

行注释在CSS中无效（块注释） - 你真的让我质疑我理智，直到我发现这一点。

Line comments are not valid in CSS (Block comments are) - you actually had me questioning my sanity until I spotted this.

当删除麻烦的行注释时，如果你查看html，你清楚地看到

When removing the troublesome line comments, if you look into the html, you clearly see

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

选择器覆盖

.x-panel-header-custom1

选择器，因此如果您希望代码正常工作，则必须在所有类上使用！important 。像这样：

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.

小提琴

这篇关于使用CSS - ExtJs进行鼠标悬停时如何更改面板上的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！