Actualmente tengo HTML en la siguiente estructura:

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

Este html se repite varias veces.

Me gustaría desvanecer todo el contenido del div "mediaItem" actual al pasar el mouse, excepto por el intervalo "remove", que debe permanecer en una opacidad de 1.

Aquí está el código Jquery que tengo hasta ahora:

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

He intentado muchas combinaciones de selección de todo el div, excepto el intervalo "eliminar", pero parece que no puedo hacer que funcione solo con el "mediaItem" actual. ¿Cómo puedo desvanecer todo en el "elemento de medios" que actualmente está suspendido sin afectar el espacio de "eliminar"?

2
Oren Hizkiya 24 jun. 2011 a las 22:38

3 respuestas

La mejor respuesta
$(this).children(":not('.remove')").fadeTo('fast', 0.5);
13
George Cummins 24 jun. 2011 a las 18:42

Puede desvanecer cada elemento hijo individualmente. Así es como lo haría:

$(".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);
         }
    });
2
citizen conn 24 jun. 2011 a las 18:42

¿Qué tal usar un selector diferente?

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

Seleccione todos los hijos, pero exonere al hijo eliminado.

5
Brad Christie 24 jun. 2011 a las 18:43