Добавление класса другому элементу.
 

Добрый вечер, уважаемые пользователи форума.
Подскажите пожалуйста, что я делаю не так, а точнее как улучшить такой код.
Не тролите код, это мой первая работа на js (да мб лучше использовать хайд)

$(document).ready(function(){
  $('li.touchcarousel-item h2').hover(function() { $('div.more-inf').addClass('more-inf-active');}, 
					function() {$('div.more-inf').removeClass('more-inf-active');
  });
});

Есть структура блоков:

<li><h2 /><div class="more-inf" /></li>

По дефолту див спрятан, при наведении на заголовок h2 диву добавляется класс который открывает див. Но таких элементов списка <li> у меня несколько, и при наведении в каждом моргает внутернний див которому добавляется класс. Подскажите как этого можно избежать?
Так же есть свойство для more-inf:hover {display: block;} что бы не пропадало.
Надеюсь на вашу поддержку, большое спасибо.

Разобрался, сделал такую конструкцию:

$('li.touchcarousel-item>h2').hover(function() {$(this).siblings('div.more-inf').addClass('more-inf-active');},
        function() {$(this).siblings('div.more-inf').removeClass('more-inf-active');});

если у вас див вложен в li, и надо показывать только 1 влоденный див, то лучше использовать
$("li").hover(function() {
$(this).find("div.more-inf").addClass ...
вместо $('div.more-inf').addClass...
тогда он действительно найдет только 1 вложенный див, отосящийся к элементу, на который наводят

<div class="more-inf" />

Это такой прикол да?