How to apply styles to a child element on parent hover?

[dmitriy-kudelko]

Hey guys,

I'm trying to achieve a simple task with Paste - to toggle an element visibility on a parent element hover. The Paste AI helper says that it's achievable by assigning unique IDs to parent and child elements and then using e.g. :hover PARENT selector applied via the customization provider. However this doesn't seem to work. Is this even supported?

I'm using latest versions of Paste core and icons packages.

Here's what was suggested by the AI and what I tried to do. This had no effect whatsoever on the child element.

import { CustomizationProvider } from '@twilio-paste/customization';
import { Box } from '@twilio-paste/core/box';

<CustomizationProvider
  elements={{
    PARENT: {
      position: 'relative',
      ':hover CHILD': {
        display: 'block',
      },
    },
    CHILD: {
      display: 'none', // Initially hidden
      position: 'absolute',
      top: '0',
      left: '0',
      backgroundColor: 'colorBackgroundPrimary',
      padding: 'space20',
      zIndex: 1,
    },
  }}
>
  <Box data-paste-element="PARENT">
    Hover over me
    <Box data-paste-element="CHILD">
      I show on hover!
    </Box>
  </Box>
</CustomizationProvider>

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Adding Custom CSS Support for all component in Paste - Answer (updated: 04/14/2023, similarity score: 86%)
• Tooltips + Icons (updated: 08/30/2022, similarity score: 86%)
• Is there a way to customize popover button styles ? - Answer (updated: 08/08/2022, similarity score: 84%)

[dosubot[bot]]

To achieve the desired effect of toggling a child element's visibility on a parent element's hover using the Paste framework, you can use the isHovered state from the StyledDisclosureHeading component. The CustomizationProvider does not support nested selectors like :hover CHILD directly. Instead, you can manage the hover state programmatically.

Here's an example of how you can implement this:

import React, { useState } from 'react';
import { Box } from '@twilio-paste/box';

const ParentComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Box
      data-paste-element="PARENT"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      position="relative"
    >
      Hover over me
      <Box
        data-paste-element="CHILD"
        display={isHovered ? 'block' : 'none'} // Toggle visibility based on hover state
        position="absolute"
        top="0"
        left="0"
        backgroundColor="colorBackgroundPrimary"
        padding="space20"
        zIndex={1}
      >
        I show on hover!
      </Box>
    </Box>
  );
};

export default ParentComponent;

In this example, the isHovered state is used to control the visibility of the child element. The onMouseEnter and onMouseLeave event handlers update the isHovered state, which in turn toggles the display property of the child element between "block" and "none" ^[1].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[dmitriy-kudelko]

The above solution based on event handlers can be used as a last resort but it would be definitely better to toggle the visibility using CSS only.