Make children hover effect trigger on parents hover

[afusdev]

Question

I want to scale the image to 110 on hover as the code below shows.
However i would like to do this when i hover over the parent element. Been trying for a while and cant seem to find anything that works. How can i do this?

with ui.element(parent):
     ui.image(child.jpg).classes('hover:scale-110')
     ui.element(child)

[python-and-fiction]

with ui.element().classes('w-32 h-32 bg-green border') as ele:
     ele2 = ui.element().classes('w-16 h-16 bg-red border hover:scale-150 ')
     ele.on('mouseenter',lambda :ele2.classes(add='scale-150'))
     ele.on('mouseout',lambda :ele2.classes(remove='scale-150'))

[marcuslimdw]

use the Tailwind group utility (from https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state):

with ui.element(parent).classes("group"):
     ui.image("child.jpg").classes("group-hover:scale-110")

[falkoschindler]

Brilliant! I didn't know about the "group" class... Works great!

[afusdev]

Extremely useful, cant believe i missed that. Thanks!