Using the Firefox Addon SDK, I am creating a toolbar with several buttons and I want to create a mouseover effect for the buttons.

At first I thought to use a [mouseover event](https://stackoverflow.com/questions/34322949/firefox-addon-sdk-onmouseover-event-for-a-button/34344292#34344292), but then I would have to create a `mouseout` event to return it to normal, so I figured the best way would be to use css

In my old XUL version of my addon I was able to attach the stylesheet by linking to it in the XUL code and just add css for my `#buttonID`, which worked perfectly.

But how do I add the css stylesheet for my toolbar using the Addon SDK?

Here's what I've tried so far (which does not produce any errors), but I think this is just for content; if this *is* correct, then I'm not sure how to bind to the element:

```
const { browserWindows } = require("sdk/windows");
const { loadSheet } = require("sdk/stylesheet/utils");

//This is how to load an external stylesheet
for(let w of browserWindows){
    loadSheet(viewFor(w), "./myStyleSheet.css","author"  );
}

```

I've also tried this:

```
var Style = require("sdk/stylesheet/style").Style;
let myStyle = Style({source:'./myStyleSheet.css'});
for(let w of browserWindows){ 
    attachTo(myStyle, viewFor(w))
};

```

And this:

```
var { attach, detach } = require('sdk/content/mod');
const { browserWindows } = require("sdk/windows");
var { Style } = require('sdk/stylesheet/style');

var stylesheet = Style({
  uri: self.data.url('myStyleSheet.css')
});

for(let w of browserWindows){ 
    attach(stylesheet, viewFor(w))
};

```

And here is my css:

```
#myButton:hover{list-style-image(url("./icon-16b.png")!important; }

```