Fade entire div except for one span with Jquery
<p>I currently have HTML in the following structure:</p>

<pre><code>&lt;div class="mediaItem"&gt;
    &lt;a class="articleLink" target="_blank" href="http://foo.com"&gt;&lt;/a&gt;
    &lt;span class="articleSummary"&gt;Summary&lt;/span&gt;
    &lt;span class="sourceDate"&gt;Source&lt;/span&gt;
    &lt;span class="remove"&gt;&lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>This html repeats itself a number of times.</p>

<p>I would like to fade the entire contents of the current "mediaItem" div on mouseover, except for the "remove" span, which needs to remain at an opacity of 1.</p>

<p>Here is the Jquery code I have so far:</p>

<pre><code>$(".mediaItem").live({
    mouseenter:
         function(){
             $(this).fadeTo('fast', 0.5);
         },
    mouseleave:
         function(){
             $(this).fadeTo('fast', 1.0);
         }
    });
</code></pre>

<p>I have tried many combinations of selecting the entire div except for the "remove" span, but I cannot seem to get it to work with only the current "mediaItem."  How can I fade everything in the "mediaItem" that is currently hovered over without effecting the "remove" span?</p>
