Enable HOVER without clicking the same div

Question

Enable HOVER without clicking the same div

Navigation

#1 by (1 votes)

5

Next, I have 2 tables, the items in the second table have hover. I need to pass the mouse on 1 item from the first table and it activates the hover of the respective item from table 2, but I can not pull the same id or class because I do not want to pull effects to table 1, I just want to activate the effects of hover on table 2 .

Each table has between 8 and 32 data, 1 = 1, 2 = 2, each time you mouse in item 1 of the first table, activates 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>

html css-hover hover

asked by anonymous 24.09.2015 / 00:16

1 answer

How to create this rule in mySQL How to set the path to access files in the procedural system

score 1 · Answer 1

Look, I found that only with CSS does not give, but can 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><tableclass="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>

Enable HOVER without clicking the same div

1 answer

JSFIDDLE