Javascript Mouseover event

Question

I have a problem with the mouseover event. When I hover over one of the divs the color on the div (home) just changes perfectly fine, but when I hover over the other div (test) that one will turn as well to the same color so I will have two divs with the same color at the same time.

How i would like it is that if you go to another div the mouseover will go away from the old div it was on. So only one div at a time can have the mousover event. I am quite new to JS, it would be amazing if anyone could help me through this! :-)

Here is my code:

HTML

 <li class="first" id="color"><a href="index.php">Home</a></li> <li id="color1" ><a href="index.php?content=test">test</a></li>

JavaScript

var div = document.getElementById( 'color' ); div.onmouseover = function() { this.style.backgroundColor = 'red'; } var div = document.getElementById( 'color1' ); div.onmouseover = function() { this.style.backgroundColor = 'red'; }

Almost everyone here is giving you solutions using mouseout or mouseleave, but that doesn't seem to be what you're asking for. You don't want the color to change until you enter a different div, right? Or do you actually want the red to go away as soon as you leave the div? — user1106925
– user1106925, Commented Feb 16, 2017 at 23:14
Along the lines of what @squint was asking, I presented a method to do it both via script and via CSS. If you want to use the script approach for some reason, but want to have none of them highlighted when you aren't hovering over any of them, just let me know -- it's an easy tweak. — RobM
– RobM, Commented Feb 17, 2017 at 1:10

MANOJ REDDY · Accepted Answer · 2017-02-16 23:11:50Z

Considering just your example that contains only two li elements. Please find the below answer.

var div = document.getElementById( 'color' ); div.onmouseover = function() { this.style.backgroundColor = 'red'; } div.onmouseleave=function() { this.style.backgroundColor = "white"; } var div = document.getElementById( 'color1' ); div.onmouseover = function() { this.style.backgroundColor = 'red'; } div.onmouseleave=function() { this.style.backgroundColor = "white"; }

kind user · Accepted Answer · 2017-02-16 23:03:54Z

You need an opposite function which will turn off the added background-color property.

var div = document.getElementById('color'); div.onmouseover = function() { this.style.backgroundColor = 'red'; } div.onmouseleave = function() { this.style.backgroundColor = 'transparent'; } var div1 = document.getElementById('color1'); div1.onmouseover = function() { this.style.backgroundColor = 'red'; } div1.onmouseleave = function() { this.style.backgroundColor = 'transparent'; }

<li class="first" id="color"><a href="index.php">Home</a></li> <li id="color1"><a href="index.php?content=test">test</a></li>

But there's much easier method to do it, just in css.

li:hover { background-color: red; }

<li class="first" id="color"><a href="index.php">Home</a></li> <li id="color1"><a href="index.php?content=test">test</a></li>

Ajay Narain Mathur · Accepted Answer · 2017-02-16 23:04:02Z

There are better ways to achieve this.

As you are learning JavaScript you can see onmouseleave event and revert the color of background here.

var div = document.getElementById('color'); div.onmouseover = function() { this.style.backgroundColor = 'red'; } div.onmouseleave = function() { this.style.backgroundColor = ''; } var div2 = document.getElementById('color1'); div2.onmouseover = function() { this.style.backgroundColor = 'red'; } div2.onmouseleave = function() { this.style.backgroundColor = ''; }

<li class="first" id="color"><a href="#">Home</a></li> <li id="color1"><a href="#">test</a></li>

Michael · Accepted Answer · 2017-02-16 23:29:29Z

You need to add the onmouseout event to return the color to white:

div.onmouseout = function(){this.style.backgroundColor = 'white';}

Edit: Also, you really shouldn't declare two variables with the same name. Please consider using something like div and div1, as this is not a habit you would want to carry forward into your future programming.

If you only want to remove the red highlight when the other item is hovered over, then use this code (it requires separate names for your variables):

var div = document.getElementById( 'color' ); var div1 = document.getElementById( 'color1' ); div.onmouseover = function() { this.style.backgroundColor = 'red'; div1.style.backgroundColor = 'white'; } div1.onmouseover = function() { this.style.backgroundColor = 'red'; div.style.backgroundColor = 'white'; }

As you can see, your code will become quite verbose the more items you add to the list. To simplify, explore options like getElementsbyClass or getElementsbyTagName; however either of those options would require loops to work through each element that invokes the class/tag.

Jorge Fuentes González · Accepted Answer · 2017-02-19 18:45:14Z

Simply you have so save a reference of the "last hovered object", and work with it when hovering a new element.

// The first time the variable do not have a erference to any element var lastHovered = null; var hover = function() { // When the hover event is called, if the saved reference is different // to the element itself, do the work (Is dump to apply the red background) // every time you hover the same element again when is already red if (lastHovered != this) { // The next line will check if the last hovered element is // actually an element and apply the old backgound if it does lastHovered && lastHovered.style.backgroundColor = 'blue'; // blue, transparent or whatever color you want it to return back // Apply our cool new background this.style.backgroundColor = 'red'; // And save the reference lastHovered = this; } }; var div = document.getElementById( 'color' ); div.onmouseover = hover; div = document.getElementById( 'color1' ); div.onmouseover = hover;

Dear Jorge, First off thank you for the code! the only thing that still does not work example: If i hover over "home" the color will be red and then blue when i leave, but then when i hover over "test" the color will aswell be red and then when i leave blue, but then both of them will be blue, how i want it is that only one of them can be blue at a time so that you can see that you selected "home" or "test" in this example. Do you know a possible whay to fix this? Thanks in Advance :)
Oh, you want it to lose the "mouseover" color only when you mouseover other element. Then you need a reference of the last hovered element. Going to update my answer.
Thank you again for the coding, but do u know if it would also be possiblwe with an "active class" on a <li> item? Do u know how to code that? If a <li> is selected it needs to get a background-color and we think we need to do that with an active class. Thanks Again, greetings Boris and Pascal @Jorge Fuentas González Also how can i tag someone in a comment? uups

RobM · Accepted Answer · 2017-02-17 01:00:45Z

Here's what you requested, with some cleaner, reusable code:

function getHighlightElements() { return document.getElementsByClassName('highlight'); } function setBgColor(element, color) { element.style.backgroundColor = color; } // add an event listener to all elements with 'class="highlight"' var highlightElements = getHighlightElements(); for (i = 0; i < highlightElements.length; i++) { highlightElements[i].addEventListener("mouseover", toggleHighlight); } // function that is called when the event is triggered, in this case, mouseover function toggleHighlight(event) { // clear background color for all 'highlight' elements var highlightElements = document.getElementsByClassName('highlight'); for (i = 0; i < highlightElements.length; i++) { setBgColor(highlightElements[i], 'white'); } // set the background color for the one that triggered the event setBgColor(event.currentTarget, 'red'); }

<li class="highlight" id="first"><a href="index.php">Home</a></li> <li class="highlight" id="second"><a href="index.php?content=test">Test</a></li> <li class="highlight" id="third"><a href="index.php?content=another">Another</a></li>

But you could use CSS instead, like this:

li.highlight:hover { background-color: red; }

<li class="highlight" id="first"> <a href="index.php">Home</a></li> <li class="highlight" id="second"><a href="index.php?content=test">test</a></li>

Collectives™ on Stack Overflow

Javascript Mouseover event

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

3 Comments

Comments

Related