Understanding visibility with hover classes

[Anindya088]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

with ui.row().classes('group items-center p-4 border'):
    ui.label('Hover to show icons').classes('text-lg font-bold')
    ui.icon('home', size='50px').classes('invisible group-hover:visible')
    ui.icon('search', size='50px').classes('hidden group-hover:block')
    ui.icon('settings', size='50px').classes('opacity-0 group-hover:opacity-100')

Description

Hi All,

I need some help in understanding how Tailwind hover classes work with visiblity. So I read about the group-hover classes to control children visiblity, like you hover over a container and then the elements inside can pop out. Looks really nice.

When I tried, I can make it work using opacity, but not using hidden vs block. Among the 3 icons, only the last one using opacity works, the other 2 does not.

Why does hidden not work in this case? And what would be the recommended approach for this kind of work?

Thanks a lot,
Anindya

NiceGUI Version

2.22.2

Python Version

Python 3.13.5

Browser

Chrome

Operating System

Windows

Additional Context

No response

[falkoschindler]

Hi @Anindya088,

The problem is that "group-hover:" doesn't remove the other classes like "invisible" or "hidden". On hover they conflict with the new classes "visible" or "block" and the result can be either of them.

A simple workaround is to add an "important" prefix !:

with ui.row().classes('group items-center p-4 border'):
    ui.label('Hover to show icons').classes('text-lg font-bold')
    ui.icon('home', size='50px').classes('invisible group-hover:!visible')
    ui.icon('search', size='50px').classes('hidden group-hover:!inline')
    ui.icon('settings', size='50px').classes('opacity-0 group-hover:opacity-100')

(Currently this fails on 3.0.0rc1, see #5156. Hopefully we can fix it for 3.0.0.)

[Anindya088]

Hi Falko,

Thanks a lot, very clear 😊
I'll use the important mark then.

Thanks,
Anindya