jquery鼠标悬停如何使用

我有下面的html。我的目标是在mouseover事件中突出显示具有相同隐藏值的表行。这意味着当我将鼠标移到第一行或第三行时，第一行和第三行都应该根据隐藏值高亮显示，在本例中，隐藏值是“cus1”。到目前为止，我只突出显示了当前表行。有人能给出解决办法吗。以下是我的详细资料：

HTML:

CSS:

试一试

演示：

试试看

---

演示：

感谢您的快速回复。这在fiddle中运行得很好，但在我的本地pc中无论使用何种浏览器都不行。原因可能是什么？使用了jQuery版本？检查您的浏览器控制台以查看是否存在任何错误OK。。。我已经用最新的jquery1.9JS文件替换了我的jquery js文件，它的工作方式类似于gem。。再次感谢阿伦。谢谢你的快速回复。这在fiddle中运行得很好，但在我的本地pc中无论使用何种浏览器都不行。原因可能是什么？使用了jQuery版本？检查您的浏览器控制台以查看是否存在任何错误OK。。。我已经用最新的jquery1.9JS文件替换了我的jquery js文件，它的工作方式类似于gem。。再次感谢你，阿伦。

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

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

.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');
    });
});