Question

I have several .box div including short text (<p>) and a thumbnail. I’m trying to change opacity of text within a .box div when any part of the .box is hovered, but I don’t want the image affected. So far I’ve got this:

jQuery(document).ready(function(){
$(".box").fadeTo("fast", 0.6);

$(".box").hover(function(){
$(this).fadeTo("fast", 1.0); 
},function(){
$(this).fadeTo("fast", 0.6);
});
});

I know it must be quite simple, but I’m stuck. Thanks for help.

Answer 1

Use .find() to get just the <p> inside to apply fade to, like this:

jQuery(function(){
  $(".box p").fadeTo("fast", 0.6);

  $(".box").hover(function(){
    $(this).find("p").fadeTo("fast", 1.0); 
  },function(){
    $(this).find("p").fadeTo("fast", 0.6);
  });
});

This uses $(".box p") to only fade the <p> elements initially, then in the hover (for the entire box) we’re finding the same <p> elements inside. If you did $(".box p").hover(...) only hovering on the <p> itself would work.