effetto jquery per ciascun div con stesso ID

[luca9]

Ciao,

ho impostato un evento jquery al mouse hover di un div della pagina.

L'id del div però è uguale ad altri presenti nella pagina perchè si tratta dell'elenco di una serie di articoli del mio blog in Joomla.

Di conseguenza al mouse over di un articolo l'effetto viene visualizzato per tutti i div della pagina.

Come posso fare per visualizzare solo dove attivo effettivamento l'hover dell'anteprima articolo?

[KillerWorm]

Ciao, gli id devono necessariamente essere univoci all'interno di uno stesso documento. Se non fosse così sarebbe opportuno correggere il tuo html.

Ad ogni modo si può utilizzare l'oggetto $(this), dentro la funzione richiamata dall'evento, per far riferimento a quello stesso elemento da cui è stata chiamata tale funzione.

[luca9]

Grazie funziona.

L'unica cosa però è che l'effetto hover incide anche su un altro div che viene attivato in tutta la pagina.

$('#articolo').hover(
function(){
$(this).animate({width: '96%'});
$('#img').animate({width: '100%'});
$('.div').animate({paddingLeft: '0px'});
},

function(){
$('#articolo').animate({width: '15%'});
$('#img').animate({width: '82%'});
$('.div').animate({paddingLeft: '20px'});
}
);

Come posso risolvere con gli altri due elementi?

[KillerWorm]

Non sapendo minimamente come è composto il resto della tua pagina, non saprei proprio come aiutarti.
Probabilmente c'è ancora qualche selettore che influisce su altri elementi. Verifica quale elemento è interessato e controlla se c'è conflitto con gli id e le classi che hai utilizzato sui selettori.

[luca9]

Provo a spiegarti.

<div id="articolo-container">
<div id="articolo"></div>
<div id="img"></div>
<div class="div"></div>
</div>

La parte Jquery è quella di sopra

[KillerWorm]

Puoi fare in diversi modi.
Uno è questo:

$('#articolo').hover(
  function(){
    $(this).animate({width: '96%'})
    .next('#img').animate({width: '100%'})
    .next('.div').animate({paddingLeft: '0px'});
  },
  function(){
    $(this).animate({width: '15%'})
    .next('#img').animate({width: '82%'})
    .next('.div').animate({paddingLeft: '20px'});
  }
);

[luca9]

Grazie Mille!!

Perfetto funziona!