SP10 Javascript : Hover on A doesn't change class of P

I was coding in my SharePoint with Javascript and it seems that SP10 nullify my code. I tried on here and everything is working fine, but when I change the value for the one in my code, nothing going well. Here's my code :

document.querySelector("#one").onmouseover = function() {mouseOver()};
document.querySelector("#one").onmouseout = function() {mouseOut()};

function mouseOver() {
    document.querySelector(".directeur1").className = "directeur1";
}

function mouseOut() {
    document.querySelector(".directeur1").className = "visuallyhidden directeur1";
}

And here's the HTML :

<div class="directeurs">
 <div class="directeur">
  <a class="liensDirecteur" id="one" href="/sites/gest-vpteimd/telecommunications/Pages/DSS.aspx">
   <img src="/sites/gest-vpteimd/telecommunications/BiblioDPTImage/DirecteurDSS.png" alt=""/></a>
  <p class="visuallyhidden directeur1">LOREM</p>

Thanks in advance !