title: Display Text on Hover Item with Javascript
body: <p>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.</p>
  
  <p>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? ;)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
     &lt;div class="box pastries" id="pastries"&gt;
       &lt;div class="box item cupcake"&gt;Cupcake&lt;/div&gt;
       &lt;div class="box item cheesecake"&gt;Cheesecake&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="box textInfo" id="textInfo"&gt;
       &lt;h2&gt;Please, select a category first!&lt;/h2&gt;
       &lt;div class="innerText-cupCake"&gt;
          &lt;p&gt;Ice cream fruitcake cotton candy.&lt;/p&gt;
       &lt;/div&gt;
       &lt;div class="innerText-cheeseCake"&gt;
          &lt;p&gt;Chocolate sweet roll chupa chups bonbon macaroon.&lt;/p&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>