How to show a child or another depending on parent hover state (CSS Only)

Question

I'm building a Menu component in react that shows a list of options. Each option has a text on the left and the '>' icon on the right. But, when I hover on the parent I want the '>' symbol to change to '>>'. How can I do this? I have added the current state of the source. I just need to hide BsChevronRight on parent hover and show BsChevronDoubleRight and viceversa.

function Menu({data}:{data:IMenuItemData[]}) {
    return (
        <div className="w-2/12 flex flex-col absolute top-2/4">
            {data.map(el => {
                return <a href="#" className="flex row justify-between items-center group">
                        {el.text}
                        <BsChevronRight></BsChevronRight>
                        <BsChevronDoubleRight></BsChevronDoubleRight>
                        </a>
                    
            })}
        </div>    
        
    )
}

I'm looking for a CSS only solution.

Answer 1

There's a quick way to do this in Tailwind:

1.) Add a "group" class to the parent e.g.

<div class="group i-am-parent">

2.) Add the hover effect on the child, prefixing with group e.g.

<div class="i-am-child group-hover:scale-110">

More info in the tailwind docs: https://tailwindcss.com/docs/hover-focus-and-other-states

Answer 2

Add hidden group-hover:block classes for your second chevron (that should appear) or any fadeIn effect like: invisible group-hover:visible or opacity-0 group-hover:opacity-100. Your parent a element should have group class to work.

Note: if you're using TailwindCSS without jit mode enabled you need to extend some properties to support group-hover variant

// tailwind.config.js
module.exports = {
  variants: {
      extend: {
        display: ['group-hover'],
        visibility: ['group-hover'],
      }
   }
}

DEMO: https://play.tailwindcss.com/XifyCwLkFV