使用Jquery淡化整个div除了一个跨度

Question

我目前在以下结构中使用HTML：

<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>

这个HTML重复了很多次。

我想在鼠标悬停时淡化当前“mediaItem”div的全部内容，但“删除”范围除外，它需要保持不透明度为1。

这是我到目前为止的Jquery代码：

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

我尝试了很多选择整个div的组合，除了“删除”范围，但我似乎无法让它只与当前的“mediaItem”一起使用。如何淡化当前悬停在“mediaItem”中的所有内容而不影响“删除”范围？

Answer 1

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

Answer 2

如何使用其他选择器？

$('.mediaItem > *:not(.remove)').fade*()

选择所有子女，但免除删除子女。

Answer 3

您可以单独淡化每个子元素。我就是这样做的：

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