title: Show text when hover over button jQuery
body: <p>I am trying to show a line of text under a row of buttons. The text shown depends on the button you hover over. I'm having trouble using <code>.hover()</code> and <code>.show()</code> with my buttons and my text. I want to have it so the text is on a line below the buttons and if you are not hovering on a button, no text is shown. Once you click the button, the text associated with it stays on the page. I'm using Bootstrap, and as of now I have the classes of the various text possibilities hidden using CSS <code>display:none</code>. When I tried to hide them using jQuery under the <code>document.ready</code>, I couldn't seem to hide them. Perhaps it is how I have the text set up in the html code? Below is a link to the JSFiddle. Thank you in advance!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="container-fluid text-center"&gt;
      &lt;div class="row"&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-5ths"&gt;
              &lt;button type="button" class="btn btn-primary btn-circle btn-1"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-5ths"&gt;
              &lt;button type="button" class="btn btn-info btn-circle btn-2"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-5ths"&gt;
              &lt;button type="button" class="btn btn-success btn-circle btn-3"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-5ths"&gt;
              &lt;button type="button" class="btn btn-warning btn-circle btn-4"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-5ths"&gt;
              &lt;button type="button" class="btn btn-danger btn-circle btn-5"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row btn-text"&gt;
          &lt;div class="b-1-text b-text"&gt;
              &lt;h3&gt;Button 1 Text&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="b-2-text b-text"&gt;
              &lt;h3&gt;Button 2 Text&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="b-3-text b-text"&gt;
              &lt;h3&gt;Button 3 Text&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="b-4-text b-text"&gt;
              &lt;h3&gt;Button 4 Text&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="b-5-text b-text"&gt;
              &lt;h3&gt;Button 5 Text&lt;/h3&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code> $('.btn-1').hover(function(){
      $('.b-1-text').show();
  });
  
    $('.btn-2').hover(function(){
      $('.b-2-text').show();
  });  
  
    $('.btn-3').hover(function(){
      $('.b-3-text').show();
  });
  
    $('.btn-4').hover(function(){
      $('.b-4-text').show();
  });
  
    $('.btn-5').hover(function(){
      $('.b-5-text').show();
  });  
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.col-xs-5ths {
          width: 20%;
          float: left;
          }
  
  .b-1-text{
        display: none;
      }
  .b-2-text{
        display: none;
      }
  .b-3-text{
        display: none;
      }
  .b-4-text{
        display: none;
      }
  .b-5-text{
        display: none;
      }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/anbenya/h7fua94s/2/" rel="nofollow noreferrer">https://jsfiddle.net/anbenya/h7fua94s/2/</a></p>