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

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

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

<div >
        <div >
            TITLE
        </div>

        <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>

On hover of button inside "buttons" I want the entire div "desc-container" to become visible.

I'm trying to make a menu that shows different text depending on which button you click.

I tried using

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

and different variations of ~ or

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>