jquery - jQuery mouseover如何使用获取当前隐藏值

我有下面的HTML。我的目标是在mouseover事件上突出显示具有相同隐藏值的表行。意思是当我将鼠标悬停在第一行或第三行上时，应该基于隐藏值（在这种情况下为“ cus1”）突出显示第一行和第三行。到目前为止，我仅设法突出显示当前表行。任何人都可以为此提供解决方案。以下是我的详细信息：

HTML：

<table id="tab1">
<tr>
    <td id="id1" >name1</td>
    <td id="id2" >acc1 </td>
    <td id="id3" ><input type="hidden" id="cus1" name="cus1" value="cus1" /></td>
 </tr>
 <tr>
    <td id="id4" >name2</td>
    <td id="id5" >acc2 </td>
    <td id="id6" ><input type="hidden" id="cus2" name="cus2" value="cus2" /></td>
 </tr>
 <tr>
    <td id="id7" >name1</td>
    <td id="id8" >acc3 </td>
    <td id="id9" ><input type="hidden" id="cus3" name="cus1" value="cus1" /></td>
 </tr>
 </table>

jQuery的：

$(document).ready(function(){
  $('td').live('mouseover', function(){
    $(this).parent().addClass('hover');
  }).live('mouseout', function(){
    $(this).parent().removeClass('hover');
  });
});

CSS：

.hover {
  background-color: cornflowerblue;
}

最佳答案

尝试

$(document).ready(function(){
    $(document).on('mouseover', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().addClass('hover');
    }).on('mouseout', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().removeClass('hover');
    });
});

演示：Fiddle