como adiciono uma nova class no seguinte codigo, por mais que eu tente não da certo!

[Leo_Lôbo 0]

<style>

     .nnClass {

     background-color: black;

     color: white;

}

</style>

 

<div class="f_d">33</div>

<div class="f_d">24</div>

<div class="f_d">49</div>

<div class="f_d">55</div>

<div class="f_d">66</div>

<div class="f_d">62</div>

<div class="f_d">53</div>

<div class="f_d">60</div>

 

<script>

var classs = document.getElementsByClassName('f_d');

var x = 0;

for(;x<classs.length;x++){

     classs[x].addEventListener('mouseover', function(){

          classs[x].className += "nnClass";

     });

}

</script>

[Omar~ 87]

var x;
for (x = 0; x < classs.length; x++) {
  classs[x].addEventListener('mouseover', function() {
    // Prever que o seletor fique "f_d nnClass nnClass nnClass....." a cada evento over
    if (classs[x].className != 'f_d nnClass') {
        classs[x].classList.add('nnClass');
    }
  }, false);
}

 

Só que tem um porém, essa nova class ao seletor deve somente existir quando o mouse estiver em cima?

Se sim não seria melhor só usar o CSS?

Citar

.f_d:hover {

     background-color: black;

     color: white

}

Se for a questão, pode ser feito com javascript também, mas se usar somente css você ganha muito mais em performance.