У меня 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>