如何通过将鼠标悬停在另一个div上来突出显示表行

Question

我有两个表

<table id='standings'>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>


<table id='matches'>
<tr id='match1'>
<td id='matchTeam1>Team1</TD>
<td class='score'> 22-31</td>
<td id='matchTeam3>Team3</td>
</tr>
</table>

我的目标是将鼠标悬停在第二个表中id为"match1"的行上，并突出显示id为"tableTeam1"one_answers"tableTeam3"的行

1.(js/css怎么可能做到这一点？

2.(当"从id＝"match1"的匹配中选择tableTeam1、tableTeam2；

提前感谢

Answer 1

1. 试试这个：

$('#match1')
.mouseenter(function() {
$('#tableTeam1').addClass('highlighted');
})
.mouseleave(function() {
$('#tableTeam1').removeClass('highlighted');
})

你还需要在那里添加一些CSS，比如这个：

.highlighted { background-color: red;}

2. 我不知道你的数据结构，但我认为应该是这样的：

...
<tr id="<?php echo $data['column_name']; ?>" <?php echo ($data['column_name'] === 'match1')? 'class="highlighted"' : ''; ?>>
...

Answer 2

将您的团队编号放在匹配行的数据属性中，然后解析它们以匹配另一个表中的元素并在它们上切换一个类是非常简单的

$('#matches .match-row').hover(function() {
const teams = $(this).data('teams');
teams.forEach(num => $('#tableTeam' + num).toggleClass('active'))
})

tr.active {
color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='standings' border=1>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches' border=1>
<tr class="match-row" data-teams="[1,3]">
<td>Team1</td>
<td class='score'> 22-31</td>
<td>Team3</td>
</tr>
<tr class="match-row" data-teams="[2,3]">
<td>Team2</td>
<td class='score'> 55-1 Blowout!</td>
<td>Team3</td>
</tr>
</table>