关键词：
【中文标题】使用 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 是必需的，所以我将它添加到两者中。 我明白了，完美。再次感谢！CSS样式：悬停时如何更改图像？
...果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚标签时，我似乎无法让它工作。我的目标是当我将鼠标悬停在按钮上时改变图片，我相信这需要一些jQuery魔法。这是我的代码，用于在悬停时尝试更改图像但 查看详情
如何在悬停时获得实际的 DOM CSS 宽度？ [复制]
...【发布时间】：2013-02-2418:41:41【问题描述】：当我必须将鼠标悬停以使事件发生时，如何展开以查看计算出的宽度？每当我将鼠标悬停在菜单中的链接上时，宽度就会从270像素更改为850像素，并使整个菜单失控。但我无法确定是... 查看详情
使用css将鼠标悬停在按钮上时如何更改站点背景图像？
】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情
悬停和鼠标悬停的不同 CSS 过渡延迟？
...：2011-08-2017:38:00【问题描述】：是否可以在“状态”之间使用具有不同延迟切换的CSS3转换？例如，我试图让一个元素在悬停时立即更高，然后在“mouseout”上等待一秒钟，然后再滑回元素的初始高度。演示页面：jsfiddle.net/RTj9K（... 查看详情
如何使用 CSS 在悬停时向图像添加工具提示
】如何使用CSS在悬停时向图像添加工具提示【英文标题】：HowtoaddtooltiptoimageonhoverwithCSS【发布时间】：2016-08-2314:47:35【问题描述】：我有三张图片，在悬停时它们使用:hover在css中增加大小。当用户将鼠标悬停在图像上时，我还希... 查看详情
当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？
】当您使用javascript或jquery将鼠标悬停时，如何使图像或按钮发光？【英文标题】：Howdoyoumakeanimageorbuttonglowwhenyoumouseoverusingjavascriptorjquery?【发布时间】：2011-09-0804:50:10【问题描述】：我想在鼠标悬停在按钮或图像上时添加发光效... 查看详情
如何在悬停时增加 gwt menuitem
...将鼠标悬停在一个项目上时，我希望它增长。问题是当我使用css修改悬停项的高度时，所有的菜单项都得到了效果。因此，当我将鼠标悬停在一个菜单项上时，所有菜单项都会增长。有没有人能够使用css在菜单栏上制作动画或过... 查看详情
鼠标悬停时的SVG工具提示？
...描述】：所以我有一个带有标记位置和多边形的SVG地图。使用CSS，这些区域比地图的其余部分更亮，并且在悬停时它们的颜色不同。到目前为止，根本没有JS代码。现在我想在鼠标悬停在某个区域上时创建一个带有文本（工具提... 查看详情
如何使用 CSS 在悬停时设置特定元素的样式？
】如何使用CSS在悬停时设置特定元素的样式？【英文标题】：HowtoStyleSpecificElementOnHoverWithCSS?【发布时间】：2016-11-1114:15:57【问题描述】：这个问题是针对http://chameleonwebsolutions.com。我需要它，以便当您将鼠标悬停在社交媒体链接... 查看详情
当我在 SVG 中将鼠标悬停时，如何显示和隐藏同级元素？
...seoverinSVG?【发布时间】：2021-05-1501:12:38【问题描述】：我使用了SVG文件，它是带有两个分割的圆形，当我将鼠标悬停在选定区域上时，我想显示和隐藏文本。当我鼠标悬停时我确实显示了文本，但是当我隐藏它时它仍然不起作用... 查看详情
在页面加载按钮上触发鼠标悬停事件，extjs3
...一个button和tooltip，我想在页面加载时显示tooltip几秒钟。使用EXTJS3我可以在页面加载时触发鼠标悬停事件吗？或者我可以有任何其他解决方案吗？【问题讨论】：自从我搞砸了ExtJS3以来已经有一段时间 查看详情
使用html和css实现鼠标悬停时文本的旋转
...旋转。每个文字或者单词都包裹在<li>标记中，然后使用CSS：hoverSelector选择器，我们将在Y轴上旋转每个文字。我们将把文字分为两部分，在第一部分中，我们将创建旋转文本的HTML基本结构。在第二部分中，通过CSS实现将鼠... 查看详情
当您使用 Javascript 单击或停止悬停时，如何使 CSS 悬停内容保持原位？
】当您使用Javascript单击或停止悬停时，如何使CSS悬停内容保持原位？【英文标题】：HowcanyoumakeCSSon-hovercontentstayinplacewhenyouclickorstophoveringusingJavascript?【发布时间】：2012-11-1909:37:16【问题描述】：我想实现一个身体系统功能。当... 查看详情
在剪贴蒙版内悬停时从灰度更改为彩色
...在悬停时将图像从灰色更改为彩色，但想知道您是否可以使用剪贴蒙版来做同样的事情。请查看附件图片，显示我想要实现的目标。我见过的其他示例要么转换整个图像，要么转换鼠标指针区域。我希望 查看详情
如何使用css更改悬停时图像的不透明度
】如何使用css更改悬停时图像的不透明度【英文标题】：Howtochangetheopacityofimageonhoverusingcss【发布时间】：2013-08-1522:18:09【问题描述】：我正在尝试弄清楚如何将所有图像设置为初始不透明度为50%，然后更改为悬停时为100%不透明... 查看详情
使用 css 在鼠标悬停时更改 asp.net 按钮的颜色
】使用css在鼠标悬停时更改asp.net按钮的颜色【英文标题】：Changecolorofanasp.netbuttononmousehoverusingcss【发布时间】：2013-09-1023:38:41【问题描述】：我有一个按钮：<divclass="HeaderBarThreshold"><asp:LinkButtonID="SetThreshold"OnClick="btnSetThres... 查看详情
悬停时如何使用 CSS 将角度字符添加到此按钮的文本中？
】悬停时如何使用CSS将角度字符添加到此按钮的文本中？【英文标题】：Howareanglecharactersbeingaddedtothisbutton\'stextwithCSSonhover?【发布时间】：2021-10-1403:00:26【问题描述】：我在W3Schools上发现了以下代码。它具有悬停效果；当您将鼠... 查看详情
如何使用 jQuery 在鼠标悬停时找到当前元素？
】如何使用jQuery在鼠标悬停时找到当前元素？【英文标题】：HowcanIfindcurrentelementonmouseoverusingjQuery?【发布时间】：2014-03-2115:46:00【问题描述】：如何获取鼠标悬停的当前元素的类名？例如当鼠标从div移到a时，我想获取div元素的... 查看详情