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

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.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 25 (6 by maintainers)

Most upvoted comments

Any update on this?

#clock:hover {
     backround:#232332;
}

I’d like to have this CSS setting

+11

mizzunet on Dec 7, 2021

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.

Kommynct on May 27, 2020

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.

notmugi on Oct 26, 2023

Done: #2989.

5p4r74cu5 on Mar 6, 2024

#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;
}

zlietapki on Dec 12, 2023

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.

Hermitter on Aug 19, 2020

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.

lorendias on Apr 27, 2020

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.

mkaramuk on Feb 5, 2024

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

spikespaz on Oct 26, 2023

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 🙂

rnestler on Nov 9, 2022

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. screenshot-23

ghost on Aug 22, 2020