Problema con clases y mouseover

[Gorgonzola]

Es curioso porque funciona desde el texto a la imagen pero no de la imagen al texto.

Código Javascript:

$(".titulo").mouseover(function(){
    $(this).css("color", "#999").parent().find(".imagendeapartado").stop().fadeTo(0, 0.4);
    });
    $(".imagendeapartado").mouseover(function(){
    $(this).stop().fadeTo(100, 0.4).parent().find(".titulo").css("color", "#999");
    });
    $(".titulo").mouseout(function(){
    $(this).css("color", "#ccc").parent().find(".imagendeapartado").stop().fadeTo(0, 1);
    });
    $(".imagendeapartado").mouseout(function(){
    $(this).stop().fadeTo(100, 1).parent().find(".titulo").css("color", "#ccc");
    });
  });
 

Código HTML:

<div class="apartado">
    <a class="link2" href="#">
    <img class="imagendeapartado" src="images/imagen.png" width="200" height="120" />
    </a>
    <p class="titulo"><a class="link3" href="#">NOMBRE</a></p>
    <hr class="hrdeapartado" width="10px"/>
    <p class="categoria"><a class="link3" href="#">CATEGORIA 1</a></p>
</div>