如何使用CSS：将鼠标悬停在插件SDK中的工具栏按钮上

我的插件最初是在XUL中构建的，我正在尝试使用插件SDK重新设计它，当我将鼠标悬停在图标上时，很难更改/突出显示图标

插件SDK工具栏及其元素的css样式表（以及如何获取要使用的正确的

#id

）。这允许我更改按钮上的

背景色

，但我似乎无法使

：悬停

改变按钮图像

如果我点击按钮，它就可以工作，但是如果我有很多按钮或菜单项，那么与css相比，这就太过分了

一个问题是按钮图像是在sdk按钮元素上设置的，并且它是按钮的一个属性

现在，我尝试使用一个透明的图像作为按钮元素的属性，然后使用css来提供图像。使用XUL，我将为按钮或菜单项应用带有

列表样式图像的图像

因此，我的问题是：如何在css中为SDK工具栏按钮悬停

---

请记住，其他样式可能会应用于图像，因此您最好使用它来检查DOM。在本例中，我覆盖了

max width

。

我的答案中有什么不足吗？我无法使用外部样式表来实现这一点。

：hover

部分根本不适用于图像。它可以很好地改变背景颜色，但不能改变图像。@bgmCoder这里的代码是否可以工作，而不包括外部部分？你使用的是透明图像吗？嗯，我没有用内联css尝试过，但是使用css文件，我基本上复制了你所有的东西。我使用的是透明图像，是的。我的css url是正确的。已经有一段时间了；让我再试一次。好的，我在上面一个全新的插件中尝试了这个。我匹配了工具箱中的widgetID，匹配了图标名称并将它们放在

data

文件夹中，但是图标从未出现在工具栏上，尽管按钮在那里。如果我设置

背景色

，颜色就会显示出来。这些图片从来没有显示过。哦，这就是用一个新的个人资料运行插件。

<binding id="toolbarbutton-image"
  extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
  <content>
    <xul:image class="toolbarbutton-icon" xbl:inherits="src=image"/>
  </content>
</binding>

const { browserWindows: windows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { attachTo } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
const { ActionButton } = require("sdk/ui/button/action");

var myButton = ActionButton({
    id: "my-button",
    label: "My Button",
    icon: { "24": "./transparent24.png" },
});

let self = require("sdk/self");
let path = self.data.url(); // alternatively use chrome.manifest to register resource or chrome path
let widgetId = "action-button--toolkitrequire-my-button"; // get this from the Browser Toolbox

let css = `
    #${widgetId} .toolbarbutton-icon {
        background-image: url(${path}/icon24.png);
        max-width: 24px;
    }
    #${widgetId}:hover .toolbarbutton-icon {
        background-image: url(${path}/icon24-hover.png);
    }`;

let style = Style({ source: css }); // or { uri: `${path}/style.css` }
for (let w of windows)
    attachTo(style, viewFor(w));