Ciao a tutti,
dovendo introdurre una feature nel mio sito WordPress ho dovuto creare delle funzioni Javascript, semplicissime, relative soltanto all'hover del mouse. Ho due elementi div, che devono essere mostrati alternativamente. Il problema è che questi elementi sono all'interno di un loop che pesca tutti i pezzi per x volte, e il risultato è che all'hover di ognuno di questi elementi all'interno dell'intera pagina viene azionato sempre l'hover del primo elemento. Dovrei cercare di aggiungere un id alle mie funzioni relativo all'intero blocco (suppongo), ma come? Ho fatto varie prove e non mi portano a nulla purtroppo.. Chiedo scusa se la mia domanda è banale, ma ho iniziato recentemente l'approccio al javascript

Qui il mio script

<script type="text/javascript">
function mouseoverElement1(){
var display = document.getElementById("element1");
display.style.display = "none";
}
function mouseoutElement1(){
var display = document.getElementById("element1");
display.style.display = "block";
}
function mouseoverElement2(){
var display = document.getElementById("element2");
display.style.display = "block";
}
function mouseoutElement2(){
var display = document.getElementById("element2");
display.style.display = "none";
}
</script>

E qui il codice html che le richiama

<div onmouseover="mouseoverElement1(); mouseoverElement2();" onmouseout="mouseoutElement1(); mouseoutElement2();">
<div id="element1" style="display: block;">This one is the first element</div>
<div id="element2" style="display: none;">This one is the second element</div>
</div>


Riuscireste a darmi qualche dritta?
Grazie!