jQuery: Как переключать отображение при наведении

У меня 2 пролета.

Первый: Второй:

Мой CSS:

.desc {display: none;}

Я хочу показать второй диапазон при наведении курсора на первый. Никаких причудливых эффектов или чего-то подобного, просто покажите диапазон. Я знаю, что существует простое решение jQuery, но я новичок в jQuery, поэтому был бы признателен за помощь в его поиске. ;)

Это то, что у меня есть пока. Правильный ли синтаксис?

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

ОБНОВЛЕНИЕ!

Как указал @thenduks, это приводит к тому, что каждый элемент .desc показывает, когда зависает .body . Как вы, наверное, догадались, у меня есть несколько .body и .desc , и я хочу, чтобы соответствующие .desc отображались только при наведении курсора на . .

Это часть моей разметки: (весь сайт по-прежнему локальный, так что я могу ' t дать вам 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>
7
задан Ploughansen 8 September 2010 в 18:54
поделиться