Question

如何将鼠标移到其元素彼此相关的不同表格的行上时，如何更改一个表的行的样式？

以下是我想要做的JSFiddle。

示例代码：

table#table1 #el1:hover + table#table2 tr.el1 {
  background: #000 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
#table1 tr:hover{
  cursor: pointer;
}

<!-- table 1 -->
<table class="table table-bordered table-hover" id="table1">
  <tr id="el1">
    <td>Element1</td>
  </tr>
  <tr id="el2">
    <td>Element2</td>
  </tr>
  <tr id="el3">
    <td>Element3</td>
  </tr>
</table>
<!-- table 2 -->
<table class="table table-bordered" id="table2">
  <tr class="el1">
    <td>ReferenceElement1</td>
  </tr>
  <tr class="el3">
    <td>REferenceElement3</td>
  </tr>
  <tr class="el2">
    <td>ReferenceElement2</td>
  </tr>
  <tr class="el3">
    <td>REferenceElement3</td>
  </tr>
</table>

我想要一个仅限CSS的解决方案。

请注意，我想在第一个:hover中tr为id的{{1}}元素上执行#el1，并在第二个table更改样式table其中元素是.el1 class

的行

Answer 1

单独使用CSS无法做到这一点但是只有一点jQuery脚本会让你成为一天

http://jsfiddle.net/tL1ap7w4/

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>

Mouser在一个表中的行上更改另一个表的另一行的样式

1 个答案: