Hola tengo una duda bastante tonta la verdad pero a ver si alguien me puede ayudar.
Tengo hecho un codigo con jquery para que cuando haga mousenter me cambie el color de un div y el del texto que ahi dentro de el y a la vez eleve 20px un icono en plan animación.
El caso es que esto pertenece a una caja de la que va a haber 3 o 4 iguales, la tipica sección "Servicios" de una web portfolio.
Mi duda es que como las cajas se llaman igual al hacer mousenter sobre cualquier caja se aplica la animación a todas y yo solo quiero que se anime sobre la que estoy en ese momento.
Hay alguna manera limpia de solucionarlo ? O tengo que llamar a las cajas , caja1, caja2,caja3,caja4 ?
Es que esto me parece muy cutre la verdad.
Este es el codigo jquery para que entendais a que me refiero no tiene misterio:
Código:
jQuery(document).ready(function(){
jQuery(".cubilete").mouseenter(function(event){
jQuery(".cuboTxt").css("background-color","#181A1C","color","#fff");
});
jQuery(".cubilete").mouseenter(function(event){
jQuery(".cuboTxt p").css("color","#fff");
});
jQuery(".cubilete").mouseleave(function(event){
jQuery(".cuboTxt").css("background-color","#fff");
});
jQuery(".cubilete").mouseleave(function(event){
jQuery(".cuboTxt p").css("color","#000");
});
jQuery(".cubilete").mouseenter(function(event){
jQuery(".feature_content i").css("top","-20px");
});
jQuery(".cubilete").mouseleave(function(event){
jQuery(".feature_content i").css("top","3px");
});
});