title: jQuery: How-to toggle display on hover
body: <p>I have 2 spans.</p>
  
  <p>First one: <code>&lt;span class="body"&gt;</code>
  Second one: <code>&lt;span class="desc"&gt;</code></p>
  
  <p>My CSS:</p>
  
  <pre><code>.desc {display: none;}
  </code></pre>
  
  <p>What I want to do, is show the second span, when hovering the first. No fancy effects or anything, just show the span.
  I know there is a simple jQuery solution out there, but I'm new to jQuery so I'd appreciate some help finding it. ;)</p>
  
  <p>This is what I have so far. Is the syntax correct?</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
      $(".body").hover(function () {
          $(".desc").toggle();
      })
  })
  &lt;/script&gt;
  </code></pre>
  
  <h2>UPDATE!</h2>
  
  <p>As @thenduks pointed out, this results in every <code>.desc</code> element to show when a <code>.body</code> is hovered. As you can probably imagine, I have several <code>.body</code> and <code>.desc</code> and I only want the corresponding <code>.desc</code> to show on hovering the <code>.body</code>.</p>
  
  <p>This is part of my markup: (the whole site is still just local, so I can't give you an url to test - sorry)</p>
  
  <pre><code>&lt;ul class="form"&gt;
      &lt;li&gt;
        &lt;label class="grid_3 alpha caption" for="from_name"&gt;Navn/Firma&lt;/label&gt;
        &lt;span class="grid_4 body"&gt;&lt;input type="text" id="from_name" name="form[from_name]" size="20" value=""&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega validation"&gt;&lt;span class="formNoError" id="component74"&gt;Udfyld navn eller firma for afhentningsadressen.&lt;/span&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega desc" style="display: none;"&gt;&lt;p&gt;Navnet på afsenderen.&lt;/p&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label class="grid_3 alpha caption" for="from_address1"&gt;Adresse&lt;/label&gt;
        &lt;span class="grid_4 body"&gt;&lt;input type="text" id="from_address1" name="form[from_address1]" size="20" value=""&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega validation"&gt;&lt;span class="formNoError" id="component75"&gt;Udfyld afhentningsadressen.&lt;/span&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega desc" style="display: none;"&gt;&lt;p&gt;Adressen på afsenderen.&lt;/p&gt;&lt;/span&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label class="grid_3 alpha caption" for="from_address2"&gt;Adresse 2&lt;/label&gt;
        &lt;span class="grid_4 body"&gt;&lt;input type="text" placeholder="etage/lejlighedsnr./e.l." id="from_address2" name="form[from_address2]" size="20" value=""&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega validation"&gt;&lt;span class="formNoError" id="component76"&gt;Invalid Input&lt;/span&gt;&lt;/span&gt;
        &lt;span class="grid_5 omega desc" style="display: none;"&gt;&lt;p&gt;&lt;/p&gt;&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>