jQury показать скрытый блок в списке при наведении

Commrade, 509 просмотров

есть список с скрытым блоком который необходимо показать c анимацией при наведении на li

<css>
.description{display:none;}
</css>

<ul id="block">
<li>
<p class="description"></p>
</li>
</ul>

<script>
$(document).ready(function(){
$('#block li').hover(function(){
$('.description').slideDown(1000);
},
function(){
$('.description').slideUp(500);
});
});
</script>

данный скрипт (написанный моими кривыми руками) показывает скрытый блок, но во всех li, необходимо показать только в том li на который указывает курсор.

Если можно, то развернутый ответ для парнокопытных, т.к. пока знаний в jQuery мало и понимаю очень трудно :)

Спасибо всем!

Ответы:

hedint

$(document).ready(function(){
$('#block li').hover(function(){
$('.description',$(this)).slideDown(1000);
},
function(){
$('.description',$(this)).slideUp(500);
});
});
1.this в обработчике события - хранит указатель на элемент, на котором сработало действие.
2.в селекторе jQuery можно указать элемент, от которого начинать поиск.

Без имени

или так
$(document).ready(function(){
$('#block li').hover(function(){
$(this).children(".description").slideDown(1000);
},
function(){
$(this).children(".description").slideUp(500);
});
});

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.