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.

[nkrantz]

Hi @dmitriy-kudelko! I'm exploring this and will get back to you this week. I'm not positive that the Customization Provider does support that type of selector. Can you explain why you're hoping to find a CSS selector over using the solution that DosuBot provided? Thanks!

[dmitriy-kudelko]

Hi @nkrantz ,

Can you explain why you're hoping to find a CSS selector over using the solution that DosuBot provided?

Obviously for performance reasons. A javascript solution requires adding two event listeners (e.g. mouseenter/mouseleave), and if you have a long list (table) of such elements, well, this could become a bottleneck.
Toggling a child visibility (or in general applying a different style) on parent hover is a common CSS task, so I was surprised that Paste doesn't provide a straightforward way to achieve this.

[nkrantz]

It's definitely possible to achieve with Paste! I just don't believe the Customization Provider currently supports the type of selector you're looking to use. If you add the hover styles directly onto the Box you should see the results you're expecting.

      <Box
        _hover={
          {
            "& [data-paste-element='CHILD']": {
              visibility: "visible",
            },
          } as BoxProps["_hover"]
        }
      >
        Hover over me
        <Box visibility="hidden" data-paste-element="CHILD">
          I show on hover!
        </Box>
      </Box>

Here's a CodeSandbox @PixeledCode made showing the behavior.

[dmitriy-kudelko]

@nkrantz , oh, ok, this works!
Didn't know it's possible to pass-in a SCSS-like code.

Thanks 👍