CODEWITHSUNDEEP
gnomegnome-shellgnome-shell-extensions
DIES
DIES

Reputation: 349

Gnome Extension: Change St.Icon image on hover?

So task is simple, but not for me - green Gnome Extensions Development noob. Of course I googled this, but didn't find something that can be helpful here.

extension.js:

https://pastebin.com/TqDVp8Yz - because 'your post mostly code'.

stylesheet.css:

.poppy-button {
    background-size: 20px;
    width: 20px;
    height: 20px;
    background-image: url("Resources/poppy.svg");
}

.poppy-button:active,
.poppy-button:focus,
.poppy-button:checked,
.poppy-button:hover {
    background-image: url("Resources/poppy-active.svg");
}

Upvotes: 0

Views: 1781

Answers (1)

andy.holmes
andy.holmes

Reputation: 3696

I would avoid the CSS and connect to the "enter-event" and "leave-event" signals, since all StWidget elements are also ClutterActors.

myIcon = new St.Icon({ icon_name: "normal-icon-name"; });

myIcon.connect("enter-event", (widget) => {
    widget.icon_name = "hover-icon-name";
});

myIcon.connect("leave-event", (widget) => {
    widget.icon_name = "normal-icon-name";
});

On the other hand, your CSS might work if you set "track-hover" to true on the StIcon.

Pro-Amateur-Tip: add the "gjs" tag to you questions to pull in more help for Gnome Shell extensions.

Upvotes: 2

Related Questions