How to set hover style, for example, button.set_style() with in extension.js file

Hi, Can any one help me how to set a style for “hover” with in extension.js file, for example Main.panel.set_style("background-color:" + background_color + ";transition-duration:" + transition_duration + "s;"); in this background-color is set with variable background_color. Like so how can we set “hover”. I have a button that works properly with css but I would like to know how to set that property with in extension.js file like button.set_style(‘background-color: green’, hover:??)

Like so how can we set “hover”.

You can’t: :hover is not a style, but a selector that decides which style should be applied. The style property can be used to set CSS style properties regardless of any selectors.

If you cannot use CSS from your stylesheet, you can change what style is applied based on the hover state:

button.connect('notify::hover', () => {
    button.style = `background-color: ${button.hover ? 'red' : 'green'};`;
});
1 Like

Thats awsome explanation! Thank you @fmuellner