9

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>
2
  • 1
    Here's an example you can test: jsfiddle.net/KHfcf It looks correct. Just be aware that when you hover over any .body element, it will toggle every .desc element.
    – user113716
    Sep 8, 2010 at 12:11
  • That looks good to me (though you might want a semi-colon after each of the two })) - is it not working? Sep 8, 2010 at 12:12

3 Answers 3

10

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.

2
  • You are right... every .desc is now showing. I have updated my question to show the markup. Hope you can help me just getting the corresponding .desc to show. Thanks! :) Sep 8, 2010 at 18:50
  • Quick followup... What if I want to .desc to also show on click and active (when tabbing)? Sep 9, 2010 at 12:24
4

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.

2
  • I believe the change in 1.4 is that passing only 1 function to hover will cause it to be used for both the mouseover and mouseout events.
    – rfunduk
    Sep 8, 2010 at 16:22
  • Look at that... it does work!? That's pretty weird, but nice to know I got it right! Sep 8, 2010 at 18:48
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.