Activate HOVER without clicking the same div

Asked

Viewed 1,238 times

5

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>
  • 2

    any problems using jQuery for example? If it can user, it’s super easy...

  • 1

    Can you put the complete code of both tables? And as @balexandre mentioned, using javascript will make your problem a lot easier. If you have two tables, and you want the Hover in the children of one to change the states of the children of the other, CSS alone does not solve

1 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

  • 1

    Great example, but it should be noted that you are using jQuery and not pure JS. + 1

  • Yeah! Thanks for editing, @Pedrocamarajunior

Browser other questions tagged

You are not signed in. Login or sign up in order to post.