[SOLUCIONADO] Aplicar CSS al hacer mouseenter

[javy7v]

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");
	});
});

[andresgarciadev]

encerio ayudaria mucho si pusieras la estructura html para hayas una similitud entre ambos y saber como determinar cual es el unico q deberia ser afectado al hacer mauseenter
en caso "cuboTxt" se encuentre dentro del cubilete solo usa jQuery(this) y find

Código Javascript:

jQuery(document).ready(function(){
    jQuery(".cubilete").mouseenter(function(event){
        jQuery(this).find(".cuboTxt").css("background-color","#181A1C","color","#fff");
        jQuery(this).find(".cuboTxt p").css("color","#fff"); 
        jQuery(this).find(".feature_content i").css("top","-20px");
    });
    jQuery(".cubilete").mouseleave(function(event){
        jQuery(this).find(".cuboTxt p").css("color","#000");
        jQuery(this).find(".cuboTxt").css("background-color","#fff");
        jQuery(this).find(".feature_content i").css("top","3px");
    });
});
 

y acorte un poco el codigo repetitivo... podria acortarse mas pero seria menos entendible asi q lo deje asi

en caso no se encuentre dentro se tendria q agregar una clase o atributo para diferenciar cada uno
pero para decirte exactamente como hacer eso si necesito el html

[javy7v]

Muchas gracias por la respuesta ^^

Tu codigo esta mucho mas limpio si aun estaba tratando de hacerlo funcionar y no me fije en como estaba :S

Te paso el HTML que tengo simplemente son unos divs con bootstrap:

Código:

<div class="container">
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="feature_header text-center">
                            <h3 class="feature_title_Black">Our <b>Services</b></h3>
                            <h4 class="feature_sub">Texto de pruebaaaaaaa <strong>palabra en negrita</strong>texto de prueba</h4>
                            <div class="divider"></div>
                        </div>
                    </div> 
                </div>
				<div class="col-md-3 col-sm-3 col-xs-12 cubilete">
					<div class="fondoIcon">
					<div class="feature_content text-center">
						<i class="fa fa-star"></i>
					 </div>
					</div>
					 <div class="cuboTitulo">
						<h4 class="titServ">Titulo Prueba</h3>
					</div>
					<div class="cuboTxt">
						<p>Texto de prueba.</p>
					</div>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-12 cubilete">
					<div class="fondoIcon">
					<div class="feature_content text-center">
						<i class="fa fa-star"></i>
					 </div>
					</div>
					 <div class="cuboTitulo">
						<h4 class="titServ">Titulo Prueba</h3>
					</div>
					<div class="cuboTxt">
						<p>Texto de prueba.</p>
					</div>
				</div>
				<div class="col-md-3 col-sm-3 col-xs-12 cubilete">
					<div class="fondoIcon">
					<div class="feature_content text-center">
						<i class="fa fa-star"></i>
					 </div>
					</div>
					 <div class="cuboTitulo">
						<h4 class="titServ">Titulo Prueba</h3>
					</div>
					<div class="cuboTxt">
						<p>Texto de prueba.</p>
					</div>
				</div>
			</div>

Aqui te enseño lo que es la idea por si lo necesitas aunque esta en proceso:

Sin hover->



Con Hover ->

[javy7v]

Esperate que me he quedado todo loco , que empanado soy lei tu mensaje rapido ayer y no entendi bien lo de usar el this -_-

GRACIAS , SOLUCIONADO Y LECCIÓN APRENDIDA!