Shadow Shadow - 1 month ago 6
CSS Question

How to I make one row/segment of a table change when I hover over another row/segment?

I have 2 tables on my site.

I want to make it so that when I hover over the producer ID in the first table, it changes the colour of the producer ID row in the 2nd table.

Answer

I think you will have to use some simple javascript events.

Pure JS:

var one = document.getElementsByClassName("one")[0];
var two = document.getElementsByClassName("two")[0];

one.addEventListener("mouseenter", function() {
    two.classList.toggle("red");
});

one.addEventListener("mouseleave", function() {
    two.classList.toggle("red");
});

https://jsfiddle.net/zv9r7oL2/1/

This is made even easier with jQuery:

$(".one").hover(function() {
    $(".two").toggleClass('red');
});

https://jsfiddle.net/zv9r7oL2/

Same with tables: https://jsfiddle.net/zv9r7oL2/2/

Edit: Also, such events should be handled after the document is fully loaded. So for pure JS:

window.onload = function() {
 //put all your code here
}

for jQuery:

$(document).ready(function() {
//your code here
}

And dont forget to link the jQuery library to use it :) add this to your < head > html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>