使用 CSS - ExtJs 进行鼠标悬停时如何更改面板上的图像？

Posted 2023-02-21

【中文标题】使用 CSS - ExtJs 进行鼠标悬停时如何更改面板上的图像？

【英文标题】：How to change image on panel when doing mouseover using CSS - ExtJs?

【发布时间】：2018-05-28 05:45:30

【问题描述】：

我正在尝试在使用 CSS 或 SASS 执行 mouseover/mouseleave 时更改图像。但是，要实现这一点，我总是可以做到：

header = panel.getHeader().getEl(); 然后这样做：

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

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

但是，我正在尝试使用 CSS 或 SASS 来完成相同的功能。

基本上：

a) 加载手风琴时默认显示所有图像。 （图像 1 应该显示在面板 1 中）。

b) 如果面板展开 图像 2 应该显示并且它的折叠状态应该显示图像 1（在面板 1 上 - 其他面板的功能相同）。

c) 鼠标悬停时应显示 Image 2 和 mouseleave Image 1 应该显示（在面板 1 上）。

这是我目前使用的 CSS，它在执行鼠标悬停/鼠标离开时适用于第一个面板，但我不确定如何显示图像。

// 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

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

【参考方案1】：

行 cmets 在 CSS 中无效（块 cmets 是） - 实际上，在我发现这一点之前，您一直在质疑我的理智。

去除麻烦的行cmets时，如果你查看html，你会清楚地看到

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

选择器覆盖

.x-panel-header-custom1

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

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

另外，我注意到您的第三个选择器（折叠的一个）缺少 header 字符串。

Fiddle

【讨论】：

@TechAbstraCt 在鼠标悬停时会显示图像重复多次。有没有办法解决这个问题？

是的，只需将 background-repeat: no-repeat; 添加到样式中即可。

我试着做背景重复：不重复；但它不起作用

jsfiddle.net/1Lcw0vjq/9 - 对于折叠的选择器 !important 是必需的，所以我将它添加到两者中。

我明白了，完美。再次感谢！