Mouseover & Mouseout met Javascript

Ik probeer functies voor mouseover en mouseout aan te roepen. Ik heb verschillende oplossingen geprobeerd die ik hier heb gevonden, maar zonder succes.

Hier ben ik. Leg de oplossing uit, want ik ben geïnteresseerd in het begrijpen van het probleem en niet alleen op zoek naar een snelle oplossing.

function MouseOver(elem) {
document.getElementsByName(elem).style.color("white");
}
function MouseOut(elem) {
document.getElementsByName(elem).style.color("black");
}
<nav id="frame-link">
<a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

Antwoord 1, autoriteit 100%

Als je een inline event-handler aanroept, zoals je doet met onmouseover="MouseOver(this);", geef je een verwijzing naar het element zelf door aan je functie, en in je functie nemen die referentie en wijzen deze toe aan de variabele elem.

U zou dan normaal gesproken elemgebruiken binnen uw functie zoals elem.style.color = "white";, niet tussen haakjes, omdat u geen functie uitvoert maar liever gewoon een eigenschap wijzigen.

function MouseOver(elem) {
  elem.style.color = "white";
}
function MouseOut(elem) {
  elem.style.color = "black";
}

<nav id="frame-link">
  <a href="index.html" name="home" onmouseover="MouseOver(this);" onmouseout="MouseOut(this);">Home</a>
</nav>

.normal { background-color:#e0e0e0; }
.normal:hover { background-color:yellow; }

<nav id="frame-link">
<a href="index.html" name="home" class="normal">Home</a>
</nav>

<a href="#" onmouseover="musOvr(this);" onmouseout="musOut(this);">Home</a>
<script>
  const musOvr = elem => elem.style.color = '#fff'
  const musOut = elem => elem.style.color = '#000'
</script>

<nav id="frame-link">
<a href="index.html" name="home" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)">Home</a>
</nav>
<script>
function mouseOver(elem) {
  elem.style.color = "white";
}
function mouseOut(elem) {
  elem.style.color = "black";
}
</script>