Código Javascript
:
Ver original$(".contenedor").mouseover(function(){
$(".grow").each(function(i){
$(this).css({
"transform": "scale(1.2)",
"opacity":"1",
});
});
Lo que yo veo ahí es que son todas clases, no hay ningún identificador.. Si duplicas el div y le dejas la misma clase también te va a afectar a ese elemento.
Leída, la función dice:
Para cada ".grow" que este dentro de un elemento con la clase ".contenedor", cuando el cursor se posicione sobre este ultimo, aplica los siguientes estilos. Así que al duplicar el elemento también va a recibir la función porque también tiene la clase "contenedor".
No tiene nada de malo usar id's, y es útil en determinadas situaciones.. Si necesitas reutilizar la funcion, entonces quitale la clase al nuevo elemento.
En el caso de que la clase "contenedor" contenga los estilos en CSS para la caja.. podes asignarles a cada div una segunda clase que va a ser la que utilice Jquery.. así le asignarías dicha clase solo a los elementos que querés que afecte la función.
Por ejemplo..
.contenedor tiene los estilos para las cajas.
.agrandar es el que vas a llamar con la función.
Entonces el html quedaria asi:
Código HTML:
Ver original<div class="contenedor agrandar"> <p class="texto">NATURALEZA
</p> <img class="grow" src="img/01.jpg"> <p class="texto">OTROTEXTO
</p> <img class="grow" src="img/otraimagen.jpg">
Y el script:
Código Javascript
:
Ver original$(".agrandar").mouseover(function(){
$(".grow").each(function(i){
$(this).css({
"transform": "scale(1.2)",
"opacity":"1",
});
});
Así la función solo se aplicaría a los elementos con la clase "agrandar" y podes reutilizar la función para todos los elementos que necesites solamente asignándoles la clase "agrandar", por mas que ésta no tenga asignados estilos CSS.
No se en que contexto estarás aplicando este código, quizás viendo algún ejemplo online te puedo ayudar mejor.. Con lo que entendí, esto es lo único que puedo aportar, disculpame si no es lo que necesitas.
Aún así, espero haberme explicado bien y que te sirva!
Saludoss