Question

I am new to jquery and am stuck trying to select an image inside a div.

<div class="div-main">
  <div class="title"></div>
  <div class="description"></div>
  <img class="post-thumb" src="img.jpg"/>
</div>

I am trying to make the title and description show only when the the user hovers over the image in the div.

Currently I have it setup so that the animations happen when the div-main is hovered over

$(document).ready(function(){
    $(".div-main").hover(
      function () {
        $(this).children(".title").fadeIn("slow");
        $(this).children(".description").fadeIn("slow");
        $(".div-main").css({ opacity: 0.1 });
        $(this).css({ opacity: 1.0 });
        $(this).show();
      }, 
      function () {
        $(".title").hide();
        $(".description").hide();
        $(".div-main").fadeIn("fast");
        $(".div-main").css({ opacity: 1.0 });
      }
    );

});

Answer 1

jsBin demo

$(".div-main").hover(
  function () {
    $(".title, .description", this).fadeTo(300, 1);
    $(".div-main").stop().fadeTo(0, 0.3);
    $(this).fadeTo(300,1);
  },function () {
    $(".title, .description").hide();
    $(".div-main").stop().fadeTo(300, 1);
  });