Second: My CSS: .desc {display:...">
Geek Answers Handbook

JQuery: how to switch display when hovering

I have 2 spans.

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

My CSS:

.desc {display: none;}

What I want to do shows the second range when it hangs first. No fancy effects or anything else, just show the range. I know there is a simple jQuery solution, but I am new to jQuery, so I would appreciate help in finding it.;)

This is what I still have. Is the syntax correct?

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

UPDATE!

As @thenduks pointed out, this causes each element to .descshow when a .bodyhangs. As you can imagine, I have a few .bodyand .desc, and I want the corresponding one to .descappear when it hangs .body.

: ( , URL- - )

<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>
+5
3

.body, .desc.

, , .desc .body.

: , , , , :

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

Update2: , , , .body, .desc , . , ... :

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 the tricky part, if the rel attr is set
      // then dont hide, otherwise, go ahead
      if( $(this).attr('rel') == 'open' ) {
        $(this).siblings('.desc').hide();
      }
    }
  );

, , /, , , . , , , .desc, . showFunc :

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

..., rel / . , , , , .

+5

script.

http://jsfiddle.net/y8wPw/

-update- - JQuery. JQuery 1.3.2 .desc .body, , ​​ . , .body. script .desc. , , script .

JQuery 1.4.2, -, , .desc , . , , .

+3

.desc .body, :

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;
}

,

+3

More articles:


All Articles