Changing div opacity excluding some of the div contents - jQuery

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

User $(".box p") selector

Answer 2

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.

Answer 3

You could probably place the thumbnail image outside the box you're trying to fade or use a more precise selector like $('.box p'). Depends if you want to have the box decoration itself fade, or just the text.

this might also work:

<div class="container">
    <img id="thumbnail" src="" style="float: left; /* or position abosolute"/>
    <div id="box">
        <p>text</p>
    </div>
</div>
<script type="text/javascript">
     $(document).ready(function() {
         // $('.box p').fadeIn('fast'); 
         // or:
         $('.box').fadeIn('fast');
     });
</script>