Waybar: :hover is not working, only on #workspaces?

[AndreasBackx]

Is it true that adding a hover effect in CSS only works for the sway module for the id workspaces? I can only get it to work for that. I wanted to enable a hover effect when hovering over modules so I know that it is the right one I'm clicking.

Regarding this same problem, the way to have different colors for icons also would not work here because the CSS in GTK probably doesn't override the HTML defined in the modules. #50

"format": "<span color=\"#fff\">{}</span>"

The span element's color would not be able to change on hover or any way at all in CSS. Defining a span inside of the module without a color attribute and trying to change the color of that span inside of there also doesn't work it seems.

[AdrienLemaire]

I'm also interested in toggling bg/fg on hover. Took me a while to realize that it only works on #workspaces ^^

[ghost]

why is this ? I want to try and toggle to make the bar disappear until mouseover ::(

[lorendias]

I could specifically use :hover on #custom-xxx:hover elements

Also, :first-child and :last-child would help in instances where buttons are grouped together and the first and last in the group need some kind of curved border-radius or other visual difference.

[Kommynct]

Yeah, this seems obvious when we have css... why would this not work?

[Alexays]

On GTK side, hover seem to work only on button and as workspaces use gtk buttons..

[Kommynct]

Perhaps everything should or at least being considered a button could maybe be toggleable? I certainly click on my other modules, and I find that hinting something is clickable with a hover effect helps ease of use.

[Hermitter]

Would love to have this as a feature. Being able to apply hover CSS to modules would let me visually differentiate between which ones have clickable actions.

[ghost]

I could specifically use :hover on #custom-xxx:hover elements

Also, :first-child and :last-child would help in instances where buttons are grouped together and the first and last in the group need some kind of curved border-radius or other visual difference.

I was able to put the entire box inside another box layer, from which I could I could group together the modules in their own boxes.. basically just wrapping and grouping everything together. This allows the bars to resize based on text/components and hover features while allowing a minimal space to be occupied.

If I could just figure out how to incorporate a hover feature to the entire bar, without having to rewrite the entire code - where the entire bar just becomes a height of 2px and transparent - this would be the dream bar.