CODEWITHSUNDEEP
cssreactjsfluent-uifluentui-react
Benjin
Benjin

Reputation: 2409

How do I make a child component visible only when the parent is hovered in FluentUI + React?

StackBlitz here

I'm trying to create a card component that represents a delete-able item, and I want the delete button to only be visible when the card is hovered.

According to what I've found, this styling should do the trick, but the delete button is stubbornly staying hidden.

const styles = makeStyles({
    itemContainer: { }
    buttonContainer: {
        visibility: "hidden",
    },
    "&:hover .buttonContainer": {
        visibility: "visible",
    },
});

// later in that same scope...

<Card
    key={"savedItem" + index}
    className={styles.item}
    appearance="subtle"
    onClick={() => {
        // load item
    }}
>
    <CardHeader
        image={<AirplaneRegular/>}
        header={item.displayName}
        action={
            <div className={styles.buttonContainer}>
                <Button
                    icon={<Delete16Regular />}
                    appearance="subtle"
                    onClick={(e) => {
                        // delete item
                        e.stopPropagation();
                    }}
                />
            </div>
        }
    />
</Card>

What am I doing wrong here?

Upvotes: 1

Views: 87

Answers (1)

regdos
regdos

Reputation: 158

In makeStyles you should define

  card: {
    width: '360px',
    maxWidth: '100%',
    height: 'fit-content',
    '& .buttonContainer': {
      visibility: 'hidden',
    },
    ':hover': {
      '& .buttonContainer': {
        visibility: 'visible',
      },
    },
  },

and the button container should have the class buttonContainer

Working code: https://stackblitz.com/edit/ff53e2-zpmwug?file=src%2Fexample.tsx

Upvotes: 0

Related Questions