Отображение текста на элементах наведения CSS / Javascript

Question

Я пытаюсь отобразить текст ("innerText") в textInfo-поле, когда наведу на кнопку ("кекс" или "чизкейк").У кого-нибудь есть идеи, как это решить?Я полагаю, что только CSS не сделает это, поэтому потребуется какой-то Javascript?

Итак, чтобы быть немного понятнее.При наведении курсора на «кекс» появляется текст «Мороженое, кекс, сладкая вата».должен появиться в поле под кнопками.А при наведении «Чизкейк» появляется текст «Шоколадный сладкий рулет чупа с капустным миндальным печеньем».должен появиться.

В конце все должно работать так:

Я рад любой помощи!Thx.

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

Answer 1

Для этого вы можете использовать mouseover и mouseleave обработчик событий.Обратите внимание, что мы добавили data-index и data-target соответственно для элемента, который мы хотим показать, основываясь на наведении определенного элемента

var pastries = document.getElementById('pastries');

// this handler will be executed every time the cursor is moved over a different list item
  pastries.addEventListener("mouseover", function( event ) {   
   var dataTarget = event.target.getAttribute('data-target')
		textInfo.querySelector('[data-index="'+ dataTarget +'"]').style.display='block';
  
  }, false);
//for mouseleave, we need to iterate each `#pastries` child element
  var pastriesChildren = document.querySelectorAll('#pastries>.box.item');
  pastriesChildren.forEach(function(pastry){
  		  pastry.addEventListener("mouseleave", function( event ) {    
        var dataTarget = event.target.getAttribute('data-target')
        textInfo.querySelector('[data-index="'+ dataTarget +'"]').style.display='none';

      }, false);
  })
   

.textInfo {
  border: solid 1px lightblue;
}

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



.innerText-cupCake {
  display: none;
}

.innerText-cheeseCake {
  display: none;
}

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

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

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