Activate HOVER without clicking the same div

Question

Next, I have 2 tables, the items in the second table have Hover. I need to mouse 1 item of the first table and it activates the Hover of the respective item of table 2, but I can’t pull the same id or class because I don’t want to pull effects to table 1, I just want to activate the effects of Hover in table 2.

Each table has between 8 and 32 data, 1 = 1, 2 = 2, each time you mouse item 1 of the first table, it activates the Hover in item 1 of table 2

<table class="table table-bordered table-hover ">
    <tr>
        <th style="width: 10px">#</th>
        <th>Posição do Pneu</th>
        <th>Pressão Atual</th>
        <th>Temperatura Atual</th>
        <th>Status</th>
    </tr>
</table>
<table style="width:100%">
  <tr>
      <td>
          <div style="height:300px; width:100px;">
          </div>                                            
      </td>
      <td>
           <div style="height:20px;"></div>
           <input id="sampleButtonDiv" type="button" value="2">
      </td>
  </tr>
</table>

<style>
   #sampleButtonDiv 
   {
       background: rgb(28, 184, 65);
       border: none; 
       width:30px;
       height:40px;
   }
   #sampleButtonDiv:hover 
   {
       background: #000;
       border: none;
       width:30px;
       height:40px;
   }
</style>

Answer 1

Check it out, I found that only with CSS can not do, but has how to do with Javascript:

jQuery(function($) {
  $('.table-trigger tr')
    .on('mouseenter', function() {
      console.log(this);

    	$('.'+$(this).attr('id'), '.table-trigger-target')
        .addClass('hover')
    })
    .on('mouseleave', function() {
        $('.'+$(this).attr('id'), '.table-trigger-target')
          .removeClass('hover')
    })
});

table#tabela1 tr:hover {
  background: #000;
  color: #fff;
  font-weight: 700;
}
#tabela1 tr:hover{
  cursor: pointer;
}

.table-trigger-target tr.hover{
  background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-hover table-trigger" id="tabela1">
  <tr id="el1">
    <td>Elemento1</td>
  </tr>
  <tr id="el2">
    <td>Elemento2</td>
  </tr>
  <tr id="el3">
    <td>Elemento3</td>
  </tr>
</table>
<table class="table table-bordered table-trigger-target" id="tabela2">
  <tr class="el1">
    <td>ReferenciaElemento1</td>
  </tr>
  <tr class="el3">
    <td>REferenciaElemento3</td>
  </tr>
  <tr class="el2">
    <td>ReferenciaElemento2</td>
  </tr>
  <tr class="el3">
    <td>REferenciaElemento3</td>
  </tr>
</table>

JSFIDDLE