I am trying to display a text ("innerText") in textInfo-box when I hover the button ("category"). Has anybody an idea how to solve it? I guess only CSS won't be enough, so some Javascript will be needed.

Update: Now I included one more item. But both texts are displayed now when I hover the items. So how can I make it possible to show only the text that belongs to the each seperat item? ;)

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

#pastries:hover + #textInfo .innerText-cupCake {
  display: block;
}

#pastries:hover + #textInfo .innerText-cheeseCake {
  display: block;
}

.innerText-cupCake {
  display: none;
}

.innerText-cheeseCake {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}

<div class="wrapper">
   <div class="box pastries" id="pastries">
     <div class="box item cupcake">Cupcake</div>
     <div class="box item cheesecake">Cheesecake</div>
   </div>
   <div class="box textInfo" id="textInfo">
     <h2>Please, select a category first!</h2>
     <div class="innerText-cupCake">
        <p>Ice cream fruitcake cotton candy.</p>
     </div>
     <div class="innerText-cheeseCake">
        <p>Chocolate sweet roll chupa chups bonbon macaroon.</p>
     </div>
   </div>
 </div>

I am trying to display a text ("innerText") in textInfo-box when I hover the button ("category"). Has anybody an idea how to solve it? I guess only CSS won't be enough, so some Javascript will be needed.

Update: Now I included one more item. But both texts are displayed now when I hover the items. So how can I make it possible to show only the text that belongs to the each seperat item? ;)

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

#pastries:hover + #textInfo .innerText-cupCake {
  display: block;
}

#pastries:hover + #textInfo .innerText-cheeseCake {
  display: block;
}

.innerText-cupCake {
  display: none;
}

.innerText-cheeseCake {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}

<div class="wrapper">
   <div class="box pastries" id="pastries">
     <div class="box item cupcake">Cupcake</div>
     <div class="box item cheesecake">Cheesecake</div>
   </div>
   <div class="box textInfo" id="textInfo">
     <h2>Please, select a category first!</h2>
     <div class="innerText-cupCake">
        <p>Ice cream fruitcake cotton candy.</p>
     </div>
     <div class="innerText-cheeseCake">
        <p>Chocolate sweet roll chupa chups bonbon macaroon.</p>
     </div>
   </div>
 </div>

• javascript
• html
• css

4 Answers 4

https://jsfiddle/4ucnxsaw/

You need to modify you html a bit.

 <div class="wrapper">
   <div class="box pastries">
     <div class="box item cupcake">Category
       <div class="innerText">
        <p>Ice cream fruitcake cotton candy.</p>
       </div>
     </div>

   </div>
   <div class="box textInfo"><h2>Please, select a category first!</h2>       
   </div>
 </div>

Now it will be easy to achieve things through CSS. Just add a style rule

.item:hover .innerText {
  display: block;
}

This is another approach, with two event listeners. One for hovering the element and the other one when the mouse leaves the element.

// if hover -> display txt
function displayTxt(evt) {
    evt.currentTarget.parentNode.querySelector( '.innerText' ).classList.remove( 'hide' );
}
// if leave -> hide txt
function removeTxt(evt) {
    evt.currentTarget.querySelector( '.innerText' ).classList.add( 'hide' );
}

/* mouseover and mouseout events to `.wrapper` element */
var $wrapper = document.querySelector( '.wrapper' );
$wrapper.addEventListener( 'mouseover', displayTxt );
$wrapper.addEventListener( 'mouseout', removeTxt );

/* hide text by default */
h2 { display: none; } /* not displaying h2 only on example, please remove this rule */
.hide { display: none; }

<div class="wrapper">
    <div class="box pastries">
        <div class="box item cupcake">Category</div>
    </div>
    <div class="box textInfo">
        <h2>Please, select a category first!</h2>
        <div class="innerText hide"><!-- added `hide` class -->
            <p>Ice cream fruitcake cotton candy.</p>
        </div>
    </div>
</div>

If the text is fixed (E.g. won't change) then use the title attribute in your HTML:

<div class="box item cupcake" title="Ice cream fruitcake cotton candy">Category</div>

If the text changes, you can use some simple JavaScript like so:

document.querySelector(".box.item.cupcake").addEventListener("mouseover", (e) => {
    e.target.setAttribute("title", document.querySelector("div.innerText p").innerText);
});

You can use this css trick if you have adjacents elements

#elem1:hover + #elem2 {
  /* to do */
}

In your case, you can do this:

.textInfo {
  border: solid 1px lightblue;
}

.textInfo:hover {
  background-color: #e8a4c9;
  color: #fff;
}

#pastries:hover + #textInfo .innerText {
  display: block;
}

.innerText {
  display: none;
}

.item {
  background-color: lightblue;
  width: 200px;
  padding: 5px;
  text-align: center;
}

.item:hover {
  background-color: #e8a4c9;
}

h2 {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  padding: 10px;
}

<div class="wrapper">
   <div class="box pastries" id="pastries">
     <div class="box item cupcake">Category</div>
   </div>
   <div class="box textInfo" id="textInfo">
     <h2>Please, select a category first!</h2>
     <div class="innerText">
        <p>Ice cream fruitcake cotton candy.</p>
     </div>
   </div>
 </div>