Как сделать анимацию вложенного элемента при наведении курсора на родительский элемент

Я новичок в jQuery, но мне трудно получить то, что я хочу. Я хочу, чтобы элемент, заключенный внутри моих <div> и <li> анимировал или делал то, что я проходил в нем.
Хотя я получил некоторый успех, но если у меня есть 10 div, весь мой заголовок внутри 10 div исчезнет, когда навевает только один. Это можно сделать через $(this) но, как я уже сказал, я новичок. Следующий мой код

    jQuery(document).ready(function($) {
    $(".products > ul > li").on('mouseenter',function(){
    //slide up h3 or div.cat-title
   $(this).closest(".products")
     .find(".cat-title")
     .fadeIn('slow');
     });
    $(".products > ul > li").on('mouseleave',function(){
    //slide down h3 (and hide)
  $(this).closest(".products")
    .find("h3")
    .fadeOut('slow');
    });

});

в то время как мой html

<div class="products">
 <ul class="products">
  <li class="product">
   <a href="#">
    <img width="180" height="190" alt="Beauty & Pampering" src="#">
     <h3>
      </a>
      <div class="cat-title">Beauty & Pampering</div>
   </li>
  </ul>
</div>