Question

I currently have HTML in the following structure:

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

This html repeats itself a number of times.

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.

Here is the Jquery code I have so far:

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

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?

Answer 1

$(this).children(":not('.remove')").fadeTo('fast', 0.5);