Shadow Shadow - 5 months ago 24
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.


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() {

one.addEventListener("mouseleave", function() {

This is made even easier with jQuery:

$(".one").hover(function() {

Same with tables:

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=""></script>