Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change Styles on Multiple Elements with Tailwinds group-hover

    Simon VrachliotisSimon Vrachliotis
    tailwindTailwind
    cssCSS

    Sometimes, you want to update styles for multiple children elements when hovering over a parent. The group-hover class in Tailwind lets you do just that in a very elegant way!

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Here's a simple UI card. It looks nice and all, but we want the background to go purple on hover. As you can see, the text becomes unreadable. How do you tackle this problem with utility classes? We could add a hover text white class on both the headline and the paragraph, but that's not really what we want.

    Tailwind offers a group hover utility class for this scenario. You give the parent element a class of group. Then, each child element that needs to react to the parent hover state gets a group hover prefix class. Check it out. Now, all update when the parent element, the one with the group class, is hovered.