Привет!
Делаю галерею для сайта. Есть несколько видов картинок: в моем примере это id «nature, car, girl». По задумке, при наведении курсора на тумбнейл, изображение скрывается, на его месте появляется плашка, залитая цветом (своим для каждого id), плюс дополнительный блок поверх плашки с заголовком и описанием. Убрали курсор, плашка с описанием исчезает, картинка возвращается.
Частично мне удалось сделать рабочий код:
$(function(){
$('div#nature').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-nature .dscr');
$('#nature .dscr').toggle();
});
$('div#car').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-car .dscr2');
$('.dscr2').toggle();
});
$('div#girl').on('mouseenter mouseleave', function(){
$(this).toggleClass('hover-girl .dscr3');
$('.dscr3').toggle();
});
});
Но если добавить новые блоки (с такими же id), при наведении курсора на тумбнейл картинка и плашка ведут себя корректно, а вот описание (дополнительный блок, в коде — dscr) выделяется для одинковых id в разных блоках одновременно.
Подскажите, где я накосячил. В аттаче более наглядный рабочий пример.