Javascript: Hover element, change class in unrelated element

Question

I've searched far and wide, and cannot find a solution.

I have two divs. One to the right of the other. In each div, I have list elements, but they are in no way parents or siblings, so I cannot use CSS.

Does anyone have a solution, where I can have a link anywhere in my html document, that when hovered, changes the class of another element, regardless of where in the html document it is placed? Javascript for example.

The idea is that when I hover an element in the left list, it will highlight the element in the right list that is considered related to it.

Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey
– Heretic Monkey, Commented Jan 12, 2017 at 16:53

VladNeacsu · Accepted Answer · 2017-01-12 16:57:23Z

1

There are many ways to achieve this. I've created an example that uses jQuery to manipulate the class on another element for the mouseenter mouseleave events (basically hover).

<div class="red">
  x
</div>
<div class="green">
  y
</div>

$('.red').on('mouseenter mouseleave', function() {
    if ($('.green').hasClass('hover')) {
    $('.green').removeClass('hover');
  } else {
    $('.green').addClass('hover');
  }
});

Sample

answered Jan 12, 2017 at 16:57

VladNeacsu

1,28816 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Streching my competence Over a year ago

Thank you! I added <script src="js/jquery-3.1.1.js" type="text/javascript"></script> <script src="js/js.js" type="text/javascript"></script> to my head (two files in a folder called "js" and the path is correct), and then the css in the CSS and the html in my html document. This is offline in a folder on my computer. The divs and the styling works, but I get no reaction from the hover. What am I missing here? The "js.js" is where I put the js, as prompted by W3 schools.

VladNeacsu Over a year ago

Open your browser console and see if it outputs an error

Streching my competence Over a year ago

js.js:1 Uncaught TypeError: $(...).on is not a function(…)(anonymous function) @ js.js:1

Streching my competence Over a year ago

Sorry, that was when I switched to <script type='text/javascript' src='ajax.googleapis.com/ajax/libs/jquery/1.6.4/…> instead of the local file. With the local library, I get no error, but also no function.

Streching my competence Over a year ago

Got it to work. Was missing //<![CDATA[ window.onload=function(){ to begin with in the JQuery and }//]]> to end it with.

Benneb10 · Accepted Answer · 2017-01-12 17:12:05Z

1

Jquery is a fairly large library. I highly suggest you do this in pure javascript if you aren't using Jquery anywhere else in your webpage. Here is an example I created that changes the class of one div when another is hovered with a simple If statement.

https://jsfiddle.net/c16rvt0y/1/

function highlightDiv(){
    if (document.getElementById("highlightMe").className === "otherDiv"){
       document.getElementById("highlightMe").className = "otherDiv otherDivHighlighted"
  } else {
     document.getElementById("highlightMe").className = "otherDiv"
  }
}

Here is an example that targets separate divs depanding on which one is called by the function:

https://jsfiddle.net/c16rvt0y/2/

function highlightDiv(highlightMeID){
    if (document.getElementById(highlightMeID).className === "otherDiv"){
       document.getElementById(highlightMeID).className = "otherDiv otherDivHighlighted"
  } else {
     document.getElementById(highlightMeID).className = "otherDiv"
  }

}

answered Jan 12, 2017 at 17:12

Benneb10

1,4891 gold badge8 silver badges13 bronze badges

4 Comments

VladNeacsu Over a year ago

This can work, but it will overwrite the classes for the targeted element

Benneb10 Over a year ago

You can just add a separate class onto that element that changes the border / background like I did in the second example. It doesn't overwrite it. Call the non hightlighted div with .class, and the highlighted div with .class.hightlightedClass. The second is more specific so it will override any styling that is the same in normal .class (I hope I'm making sense)

VladNeacsu Over a year ago

Perfectly clear, but you always have to maintain the otherDiv class in code, or whatever classes the element had before. jQuery handles that properly with add and remove class. It can be easily done with JavaScript but jQuery is easier to understand.

Streching my competence Over a year ago

Large? The file was 260kb. I'm also only going to use this offline. Thank you anyways, I may try this if I cannot get the jQuery to work.

Collectives™ on Stack Overflow

Javascript: Hover element, change class in unrelated element

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related