[SOLUCIONADO] Problema con clases y mouseover

[Gorgonzola]

Hola, resuelto el problema para afectar un objeto mediante otro:

http://www.forosdelweb.com/f53/afectar-objeto-mediante-otro-1095680/

Pero ahora surge otro problema similar con otro elemento de la web:


Se trata de una serie de imágenes con un texto debajo que dirigen a diferentes secciones. Al poner el cursor encima de la imagen, esta se vuelve semitransparente y el texto cambia de color, así como al poner el cursor sobre el texto. Hasta ahí todo bien, simplemente utilizo el mismo sistema que en en el post anterior:

Código Javascript:

$(".desaparece").mouseover(function(){
  $(".imagen").mouseover(function(){
    $(".imagen").stop().fadeTo(100, 0.5);
    $(".texto").css("color", "#CCC");
  });  
  $(".texto").mouseout(function(){
    $(".texto").css("color", "#666");
    $(".imagen").stop().fadeTo(100, 1);
  });
});
 

El problema está en que los elementos con la clase .imagen y con la clase .texto se repiten a lo largo del html, y al pasar el cursor sobre uno de los elementos, todos los elementos con esas clases se ven afectados. ¿Como se haría para que solo se vean afectados la imagen sobre la que se coloca el cursor y su texto correspondiente o viceversa?

[codeams]

Ayudaría poder ver el documento html. Si estan contenidos en un mismo div podrías llamarlos desde el parent. Ejemplo:

Código HTML:

<div>
      <img src="" class="imagen" />
      <span class="texto">texto</span>
</div>
 

Código Javascript:

$('.texto').on('mouseover',function(){
     $(this).css("color", "#CCC").parent().find('.imagen').stop().fadeTo(100, 0.5)
})
 

Esto es solo para darte una idea, no necesariamente hará exactamente lo que buscas.
Puedes hacer justamente lo mismo para mouseout.

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

[Gorgonzola]

Solucionado!

El problema estaba en los links del html

ahora es:

Código HTML:

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

Gracias por la parte del jquery! ;)