Apply Inline Hover to another table in HTML

Question

In my HTML there are two separate tables, and in all my tags tr contain a hover applied in the CSS.

My question is the following: when passing the mouse on a tag tr of a table it is possible to apply the tr from the other table?

This is possible only with CSS or we need Javascript as well?

div {
  display: flex;
}

table{
  border-collapse: collapse;
  width: 100%;
  margin: 2px;
  text-align: center;
}

th{
  border: 1px solid black;
  background-color: gray;
}

td{
  border: 1px solid black;
}

tr:hover{
  background-color: yellow;
}

<div>
<table>
  <thead>
    <tr>
      <th>1</th>   
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>

</table>

<table>
  <thead>
    <tr>
      <th>1</th>   
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>

</table>

</div>

Answer 1

Unfortunately, CSS is not the only thing you can do, because there is no control over which row is in another table. You need a rule to establish that.

In the example below, I reimplemented the CSS Hover in Javascript with the events mouseover and mouseout, on and off a CSS class. Also note that I had to add an attribute id to the tables.

Javascript code is simple and without dependencies. When "on" (Highlight) a line, one finds the sister line (corresponding in a different table) and the league also.

Remembering that the tables need to have the EVEN number of lines.

function acharTabelasIrmas(tabela) {
  return document.querySelectorAll("table:not(#" + tabela.id + ")");
}

function acharLinhasIrmas(linha) {
  var tabelasIrmas = acharTabelasIrmas(linha.closest("table"));
  return Array.from(tabelasIrmas).map(function(tabela) {
    return tabela.rows[linha.rowIndex];
  });
}

function ligarLinha(linha) {
  var linhasParaLigar = acharLinhasIrmas(linha);
  linhasParaLigar.push(linha)
  linhasParaLigar.forEach(function(linhaParaLigar) {
    linhaParaLigar.classList.add("highlight");
  });
 }

function desligarLinha(linha) {
  var linhasParaDesligar = acharLinhasIrmas(linha);
  linhasParaDesligar.push(linha)
  linhasParaDesligar.forEach(function(linhaParaDesligar) {
    linhaParaDesligar.classList.remove("highlight");
  });}

window.onload = function() {
  document.querySelectorAll("tbody > tr").forEach(function(elemento) {
    elemento.addEventListener("mouseover", function() {
      ligarLinha(elemento);
    });


    elemento.addEventListener("mouseout", function() {
      desligarLinha(elemento);
    });
  });
};

table {
  border-collapse: collapse;
  width: 100%;
  margin: 2px;
  text-align: center;
}

th {
  border: 1px solid black;
  background-color: gray;
}

td {
  border: 1px solid black;
}

tr.highlight {
  background-color: yellow;
}

<table id="tb1">
  <thead>
    <tr>
      <th>1</th>   
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>

</table>

<table id="tb2">
  <thead>
    <tr>
      <th>1</th>   
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>
  
  <table id="tb3">
  <thead>
    <tr>
      <th>1</th>   
      <th>2</th>
      <th>3</th>
      <th>4</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </tbody>

</table>