CODEWITHSUNDEEP
javascriptmouseovermouseout
Tommy.Collins
Tommy.Collins

Reputation: 13

Mouseover & Mouseout w/ Javascript

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>

Upvotes: 1

Views: 38023

Answers (4)

Lisan E
Lisan E

Reputation: 329

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>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 4

le_m
le_m

Reputation: 20228

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

Upvotes: 0

j08691
j08691

Reputation: 207891

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>

Upvotes: 4

Related Questions