: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.

[mizzunet]

Any update on this?

#clock:hover {
     backround:#232332;
}

I'd like to have this CSS setting

[Zaedus]

For those of y'all who are want those cool animations for hovering, I found a pretty good way to do it. Hover effects seem to be exclusive to GtkButtons. I checked out PR #1120 because it forced elements with an on-click event to be GtkButtons. From there I could do whatever :hover stuff I wanted.

https://user-images.githubusercontent.com/42098470/172022640-74673166-2609-4776-af24-3b99dc3087c2.mp4

This might be a bit too brief, so if you have any questions please ask, I've definitely had a few complications. For instance, the actual label is nested inside the Button so when, for example, setting the label color, you need to do the following.

#mycoolclass label {
 color: blue;
}

NOTE: By using #1120 you will probably have a lot of spacing issues because of this nested GtkLabel having its own margin and padding so keep that in mind when switching to it.

[rnestler]

Since I had unexpected hover effects everywhere where I have an on-click definition after upgrading to 0.9.15 I guess this is now fixed :slightly_smiling_face:

[zerkalica]

It's possible to rewrite all modules from ALabel to Button?

https://github.com/Alexays/Waybar/blob/master/src/modules/custom.cpp#L7

[spikespaz]

@zerkalica Is this why I'm having problems?

From what I read, anything with an on-click handler is supposed to be a gtkmm__GtkButton, however, the #bluetooth widget is not a button but rather a GtkEventBox containing a GtkLabel. This makes it impossible to use #bluetooth:hover as a valid selector.

[izelnakri]

@Alexays This seems like a major drawback of Waybar that has not been addressed, in addition this issue seems to be closed, could you reopen this issue?

window#waybar should have an :hover state or at least .horizontal:hover. It shouldn't be only buttons as it is very confusing and undocumented mismatch.

[loegaire]

and :hover on on-click elements stop working again...

[notmugi]

why is this issue closed? this is a really fundamental part of css thats straight up being ignored. i cant even get custom on-click functions to hover anymore. whats up with that? feels like an oversight that the only things hoverable are workspaces.

[spikespaz]

Not sure if you guys have looked into the source, but there's no QC...

[zlietapki]

#custom-XXX:hover still not work. Even with on-click exists

"custom/apps": {
    "format": "Apps",
    "on-click": "pkill -x rofi || rofi -show drun"
},

#custom-apps:hover {
    color: red;
}

[phrogg]

I also would love to have this!

[5p4r74cu5]

Damn this isn't a thing yet.

[mkaramuk]

Does this feature implemented or will it? I tried #custom-module button.focuesed and :hover but it doesn't works. The module has on-click event too.

[samisul]

it doesnt seem to be possible unfortunately

[EaGLexEyE]

And the issue is still closed.

[rnestler]

Well it worked at some point, but then got removed again since it caused issues. Maybe it would be worth to create a new feature request for it?

[5p4r74cu5]

Done: #2989.