title: jQuery on hover of a link show hidden div
body: <p>I'm attempting to show some hidden content when a link is hovered. The content is unique per link. I have it working fine but I know the jQuery code is awful. I think ".this" is the secret but I can't make it work. Any thoughts? This is the most ugly inefficient crap jQuery ever but I am trying to figure this out. Thanks!</p>
  
  <p>jQuery</p>
  
  <pre><code>          $(document).ready
        (
          function(){
              $(".short-term-trigger").hover(function(){
               $(".short-term").toggleClass("visible");
               });
            }
      )
  
      $(document).ready
        (
          function(){
              $(".medium-term-trigger").hover(function(){
               $(".medium-term").toggleClass("visible");
               });
            }
      )
  
      $(document).ready
        (
          function(){
              $(".long-term-trigger").hover(function(){
               $(".long-term").toggleClass("visible");
               });
            }
      )
  
      $(document).ready
        (
          function(){
              $(".retirement-trigger").hover(function(){
               $(".retirement").toggleClass("visible");
               });
            }
      )
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul id="goal-btns"&gt;
              &lt;li&gt;&lt;a class="short-term-trigger" href="#"&gt;Short-Term Gains&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="medium-term-trigger" href="#"&gt;Medium Term Goals&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="long-term-trigger" href="#"&gt;Long Term Goals&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="retirement-trigger" href="#"&gt;Retirement&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="talk-bubble hang-left short-term"&gt;
              &lt;p class="bubble-text"&gt;I’ll need the money is less than 12 months.&lt;/p&gt;
          &lt;/div&gt;&lt;!--/short-gains--&gt;
  
          &lt;div class="talk-bubble hang-right medium-term"&gt;
              &lt;p class="bubble-text"&gt;I don’t need the money immediately but may need it within the next 6-10 years.&lt;/p&gt;
          &lt;/div&gt;&lt;!--/short-gains--&gt;
  
          &lt;div class="talk-bubble hang-right long-term"&gt;
              &lt;p class="bubble-text"&gt;I’m investing for the long-term.&lt;/p&gt;
          &lt;/div&gt;&lt;!--/short-gains--&gt;
  
          &lt;div class="talk-bubble hang-right retirement"&gt;
              &lt;p class="bubble-text"&gt;I’m investing for my retirement.&lt;/p&gt;
          &lt;/div&gt;&lt;!--/short-gains--&gt;
  </code></pre>