Seguinte, eu tenho 2 tabelas, os itens da segunda tabela tem hover. Preciso passar o mouse em 1 item da primeira tabela e ela ativar o hover do item respectivo da tabela 2, mas não posso puxar o mesmo id ou classe porque não quero puxar efeitos pra table 1, quero só ativar os efeitos do hover na table 2.
Cada tabela tem entre 8 e 32 dados, 1 = 1, 2 = 2, cada vez que passar o mouse no item 1 da primeira tabela, ativa o hover no item 1 da tabela 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>