how to make element appear when seperate button is focused-CodePudding

#desc {
    visibility: hidden;
    opacity: 0;
}

.exp-container > .buttons:has(.button:focus)   #desc {
    opacity: 1;
    transition: 0.5s;
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .top > h1:before {
    visibility: visible;
    transition: 0.5s;
    content: "Graphic Design Lead";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .top > .date:before {
    visibility: visible;
    transition: 0.5s;
    content: "July 2021 - July 2022";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .content > .exp::before {
    visibility: visible;
    transition: 0.5s;
    content: "- Developing screens and UI components for the web application using React and Tailwind. - Fixing UI issues and integrating backend APIs with Redux Saga.";
}

.exp-container > .buttons:has(#OMI:focus)   #desc > .content > .comp::before {
    visibility: visible;
    transition: 0.5s;
    content: "Remote";
}

<div >
    <div >
        EXPERIENCE
    </div>

    <div >
        <button  id="OMI"><span>ONE</span></button>
        <button  id="RC"><span>TWO</span></button>
        <button  id="MRKT"><span>THREE</span></button>
        <button  id="BIBLE"><span>FOUR</span></button>
        <button  id="FREE"><span>FIVE</span></button>
        <button  id="CHAR"><span>SIX</span></button>
    </div>

    <div id="desc">
        <div >
            <h1>Placeholder Text <span >Month 2022 - Month 2022</span></h1>
        </div>

        <div >
            <div >Placeholder Text</div>
            <div >Placeholder Text<br>Placeholder Text<br>Placeholder Text</div>
        </div>
    </div>
</div>

I made some changes that included trying :has(), but my issue is now that I want to align these buttons so they evenly fit inside in the fluid background.

Doing so requires the buttons to be in a seperate div from the content so I am able to make the buttons flex (as far as I know).

Is this possible in just CSS or do I have to include js?

CodePudding user response：

In your scenario (Only CSS), to make this work, you'll need two things,

flatten the buttons elements - That means removing the .buttons container

Or use :has() selector instead .exp-container > .buttons:has(.button):hover ~ #desc-container

remove the :after tag in the css #desc-container:after -> #desc-container

In that way you can specify in your css each button to show what context

See also: This answer

see example:

#desc-container {
    width: 100%;
    display: none;
}

.exp-container > .button:hover ~ #desc-container {
    display: block;
}

<div >
        <div >
            TITLE
        </div>

            <button >
                <span>ONE</span>
            </button>
            <button >
                <span>TWO</span>
            </button>
            <button >
                <span>THREE</span>
            </button>
            <button >
                <span>FOUR</span>
            </button>
            <button >
                <span>FIVE
            </button>
            <button >
                <span>SIX</span>
            </button>

        <div id="desc-container">
            <div >
                <h1>TITLE <span >July 2021 - July 2022</span></h1>
            </div>

            <div >
                <div >EXAMPLE</div>
                <div >
                    EXAMPLE
                </div>
            </div>
        </div>
   </div>

CodePudding user response：

I am not sure if it's 100% possible with CSS. You can use little bit of JavaScript like that:

const buttons = document.querySelectorAll('.button');
const container = documetn.querySlector('#desc-container');

function handleHover(e) {
   const elementId = e.id;

   switch (elementId) {
      case '1':
         container.innerHTML = 'Some text on hover 1. el';
      case '2':
         container.innerHTML = 'Some text on hover 2. el';
      case '3':
         container.innerHTML = 'Some text on hover 3. el';
      default:
         return;
   }
}


buttons.forEach((element) => {
   element.addEventListener('mouseover', handleHover);
})

and in HTML you need to add id to each button

CodePudding user response：

Let’s not forget about :has! This is totally possible with css only! But check out browser compatibility, pretty wide nowadays tho!

https://caniuse.com/css-has

.buttons:has(.button:hover) ~ #desc-container{
 display:block !important;
}


#desc-container {
    width: 100%;
    display: none;
}

<div >
            <button >
                <span>ONE</span>
            </button>
            <button >
                <span>TWO</span>
            </button>
            <button >
                <span>THREE</span>
            </button>
            <button >
                <span>FOUR</span>
            </button>
            <button >
                <span>FIVE
            </button>
            <button >
                <span>SIX</span>
            </button>
        </div>

        <div id="desc-container">
            
            <div >
                <h1>TITLE <span >July 2021 - July 2022</span></h1>
            </div>

            <div >
                <div >EXAMPLE</div>
                <div >
                    EXAMPLE
                </div>
            </div>
        </div>