jQuery: How-to toggle display on hover

Question

I have 2 spans.

First one: <span class="body"> Second one: <span class="desc">

My CSS:

.desc {display: none;}

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

This is what I have so far. Is the syntax correct?

<script>
$(document).ready(function() {
    $(".body").hover(function () {
        $(".desc").toggle();
    })
})
</script>

UPDATE!

As @thenduks pointed out, this results in every .desc element to show when a .body is hovered. As you can probably imagine, I have several .body and .desc and I only want the corresponding .desc to show on hovering the .body.

This is part of my markup: (the whole site is still just local, so I can't give you an url to test - sorry)

<ul class="form">
    <li>
      <label class="grid_3 alpha caption" for="from_name">Navn/Firma</label>
      <span class="grid_4 body"><input type="text" id="from_name" name="form[from_name]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component74">Udfyld navn eller firma for afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Navnet på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address1">Adresse</label>
      <span class="grid_4 body"><input type="text" id="from_address1" name="form[from_address1]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component75">Udfyld afhentningsadressen.</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p>Adressen på afsenderen.</p></span>
    </li>
    <li>
      <label class="grid_3 alpha caption" for="from_address2">Adresse 2</label>
      <span class="grid_4 body"><input type="text" placeholder="etage/lejlighedsnr./e.l." id="from_address2" name="form[from_address2]" size="20" value=""></span>
      <span class="grid_5 omega validation"><span class="formNoError" id="component76">Invalid Input</span></span>
      <span class="grid_5 omega desc" style="display: none;"><p></p></span>
    </li>
</ul>

Answer 1

Your script works.

http://jsfiddle.net/y8wPw/

-update- Your scripts works in different ways according to the JQuery version used. In JQuery 1.3.2 the .desc span will show when you mouseover the .body span, but will not disappear when the mouse leaves it. Next time when the mouse enters .body. The script reverses it's action and hides the .desc. So every time you hover on and off the first span, it'll run the script once.

In JQuery 1.4.2 apparently there's been an update that makes the .desc show up on mouseover, but hide immediately on mouseout. I think this is what you were looking for.

Answer 2

This will result in hovering over any .body element showing all .desc elements.

If you post your actual markup we can figure out the proper code to show a corresponding .desc for a hovered .body.

Update: So, given the markup in the updated answer I'd probably re-write the handler like so:

$('.body').hover( function() {
  $(this).siblings('.desc').toggle();
} );

Update2: To have the same behavior on click and active is a bit tricky because as soon as you mouseout of the .body the .desc will hide even if you clicked on it. Doable though... I'd try this:

var showFunc = function() { $(this).attr('rel', 'open').siblings('.desc').show(); };
$('.body')
  .click( showFunc )
  .focus( showFunc )
  .hover(
    function() {
      // don't update 'rel' attribute
      $(this).siblings('.desc').show();
    },
    function() {
      // here's the tricky part, if the rel attr is set
      // then dont hide, otherwise, go ahead
      if( $(this).attr('rel') == 'open' ) {
        $(this).siblings('.desc').hide();
      }
    }
  );

So this will make it so that just hovering hides/shows as before, but if you click it will 'stick' open. In this case you'd probably want the show handler to also hide other open .descs so that you wont end up tons of open ones all over. So maybe showFunc should be:

var showFunc = function() {
  $("." + $(this).className).attr('rel', '');
  $(this).attr('rel', 'open').siblings('.desc').show();
};

... which will simply clear all other rel attributes on previously clicked/focused elements. I'm sure this would still need tweaking, but hopefully it points you in the right direction.

Answer 3

If you want to be able to just show the .desc element of a specific .body element you can use the following:

HTML

<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>
<div class='body'>Body content<span class='desc'>description</span></div>

jQuery

$(document).ready(function() {
    $(".body").hover(function () {
        $(this).find(".desc").toggle();
    })
})

CSS

.desc {
    display: none;
}

Hope that helps