Excluding Text from jQuery animated Div

I am building a site using joomla, and I recently added a jQuery module that changes the opacity of the containing div when you hover over it. It contains text, and the text kinda looks cheesy because it loses opacity as well. So I was wondering, how I could target the div, but exclude the text so, that the text remains at 100% opacity.

Here is my code:

<scr开发者_运维问答ipt src="http://code.jquery.com/jquery-1.4.4.js"></script>    
<script>jQuery.noConflict();
    jQuery(document).ready(function() { 
      //settings 
      var opacity = 0.5, toOpacity = 1, duration = 350; 
      //set opacity ASAP and events 
      jQuery('.opacity').css('opacity',opacity).hover(function() { 
          jQuery(this).fadeTo(duration,toOpacity); 
        }, function() { 
          jQuery(this).fadeTo(duration,opacity); 
        } 
      ); 
    });
</script>

I've tried to use CSS to change the opacity of a container while maintaining totally opaque children and came to the conclusion that it can't be done, unfortunately.

What I suggest you do is have two divs positioned in the same location but only animate the opacity of one which works as a background layer.