Mouseover & Mouseout w/ Javascript

Question

I'm trying to call functions for mouseover and mouseout. I've tried a variety of different solutions that I've found here with no luck.

Here's where I'm at. Please explain the solution as I'm interested in understanding the issue and not just looking for a quick fix.

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>

`this` in your context will refer to the element itself, you don't need to re-query the dom for it. change your function body to just `elem.style.color = blah;` also, `.style.color` isn't a function. you should get errors in the console explaining as much. — rlemon, May 15 '17 at 20:44
Hit F12 and go to the console tab. Hit refresh on your page. — Matt, May 15 '17 at 20:45
Don't use inline HTML event handling attributes. See here for why: http://stackoverflow.com/questions/43459890/javascript-function-doesnt-work-when-link-is-clicked/43459991#43459991 — Scott Marcus, May 15 '17 at 20:48
Why aren't you just using CSS hover effects? I believe it would provide the same desired result. — Thomas Juranek, May 15 '17 at 20:49
@ThomasJuranek is correct, that for simply changing the color of text on hover, using css is much better. But for your question as to why this doesnt work, @rlemon is correct. You can change `document.getElementsByName(elem).style.color("white");` to `elem.style.color = "white"` — Joe Lissner, May 15 '17 at 20:52

score 4 · Accepted Answer · answered May 15 '17 at 20:47

When you call an inline event handler such as you do with onmouseover="MouseOver(this);" you're passing a reference to the element itself to your function, and in your function you're taking that reference and assigning it to the variable elem.

You would then normally use elem within your function like elem.style.color = "white";, not with parenthesis, as you're not running a function but rather just changing a property.

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>

@Christoph no argument there, but the OP asked for a JavaScript explanation, so I stuck to what they wanted. — j08691, May 15 '17 at 20:50
Totally agree, I would just mention this as side note. Perhaps OP only uses JS because they don't know that it's actually easier with css;) — Christoph, May 15 '17 at 20:52

score 4 · Answer 2 · edited May 23 '17 at 12:26

If it's truly just styling that needs to change, then you don't need JavaScript at all. You can just use CSS with the :hover pseudo-class:

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

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

But, if it's more than just styling, then you'll want to do this the modern, standards-based way. Don't use inline HTML event handling attributes (see here for why). This syntax is a little more typing, but well worth it for all the benefits it brings.

Lastly, (and again), if it is styles that you're after, working with classes is much simpler than working with individual style properties.

// Get a reference to the element that needs to be worked with
var theLink = document.querySelector("a[name='home']");

// "Wire" the element's events
theLink.addEventListener("mouseover", mouseOver);
theLink.addEventListener("mouseout", mouseOut);

function mouseOver() {
  theLink.classList.add("hovered");
}

function mouseOut() {
  theLink.classList.remove("hovered");
}

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

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

+1 While OP looks for the issue with *his* approach, he/she will surely benefit from having the modern clean solution outlined. — le_m, May 15 '17 at 20:57
@le_m Thanks. We should always point out when the OPs approach is wrong. — Scott Marcus, May 15 '17 at 20:59
Perhaps reverse the examples since the second really answers the question as asked. Not knowing the real motivation of the OP the approach of the OP is not necessarily "wrong" here - it may just be to learn how to call functions as is stated in the question. That being said, I prefer your approach in adding event listeners for code though it too does not directly provide the answer to the OPs question which is "understanding" here regarding the function call in the markup. — Mark Schultheiss, May 25 '19 at 13:47

score 1 · Answer 3 · answered Jun 29 '21 at 14:14

Here is your very short solution with modern syntax.

<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>

score 0 · Answer 4 · edited May 23 '17 at 11:47

You need to put JavaScript code in a <script> tag.
elem is not the name but the actual reference of the DOM element that caused the event handler to be called. See what's "this" in javascript onclick?
It is good style to start function names with a lowercase letter.
Unlike jQuery, where you apply attributes by calling a function, the vanilla JavaScript elem.style.color is a writable string property. You need to assign a value.

<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>

Alternatively, use onmouseover="mouseOver(event)" and write:

function mouseOver(event) {
  var elem = event.target;
  elem.style.color = "white";
}

This would allow you to access more properties of the event that occurred, if desired.

Mouseover & Mouseout w/ Javascript

4 Answers4