5

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>
2
  • 2
    algum problema em usar jQuery por exemplo? Se pode user, é super facil...
    – balexandre
    23/09/2015 às 22:23
  • 1
    Pode colocar o código completo das duas tabelas? E como o @balexandre mencionou, o uso de javascript vai facilitar bastante o seu problema. Se você tem duas tabelas, e quer que o hover nos filhos de uma altere o estados dos filhos da outra, CSS sozinho não resolve 21/10/2015 às 11:25

1 Resposta 1

1

Olha só, descobri que somente com CSS não dá, mas tem como fazer com 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

2
  • 1
    Ótimo exemplo, mas cabe destacar que você está utilizando jQuery e não JS puro. +1 3/12/2015 às 15:05
  • É! Valeu pela edição, @PedroCamaraJunior 3/12/2015 às 15:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .