CODEWITHSUNDEEP
javascriptjqueryselectorparent-childjquery-hover
crmepham
crmepham

Reputation: 4740

Jquery - trying to select an image within a div

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 });
      }
    );

});

Upvotes: 3

Views: 4167

Answers (3)

jfriend00
jfriend00

Reputation: 707258

To make the description and title fade in and out when you hover over the image, you could do this:

$('.div-main .post-thumb').hover(function(){
  $(this).parent().find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).parent().find(".title, .description").stop(true).fadeOut();
});

If the image is normally the only visible content except when hovering, then this might work better because things would remain visible when hovering over the title and description too:

$('.div-main').hover(function(){
  $(this).find(".title, .description").stop(true).fadeIn();
},
function() {
  $(this).find(".title, .description").stop(true).fadeOut();
});

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

I have decided to post this as an answer.

$('.div-main > img')
    .hover(function(){
        $(this).parent().find(".title, .description").fadeIn();  //Title & description
    },
    function(){
        $(this).parent().find(".title, .description").fadeOut();
    }
);

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

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);
  });

Upvotes: 1

Related Questions