Question

<table border=2>
    <tr class="here1 yes">
        <td>aaa1</td><td>bbb1</td>
    </tr>
    <tr class="here2 yes">
        <td>aaa2</td><td>bbb2</td>
    </tr>

    <tr class="here55 yes">
        <td>aaa3</td><td>bbb3</td>
    </tr>
</table>


<table border=2>
    <tr class="here1 yes">
        <td>ccc1</td><td>ddd1</td>
    </tr>
    <tr class="here2 yes">
        <td>ccc2</td><td>ddd2</td>
    </tr>

    <tr class="here55 yes">
        <td>ccc3</td><td>ddd3</td>
    </tr>
</table>


.yes:hover {
   background-color: red;
}

现场：http://jsfiddle.net/KzzW8/

上表是使用以下PHP生成的：

 `<tr class="here<? echo $i ?> yes">`

我想在TR.here1上鼠标悬停以将任何TR.here1的内容转换为RED，其中下级TD位于组中：（aaa1，bbb1，ccc1，ddd1）它在哪个表中。

我相信我可以使用jQuery。这可能吗？

Answer 1

http://jsfiddle.net/KzzW8/1/

$('tr').hover(function() {
    var cls = $(this).prop('class').match(/here\d+/);
    if (cls) {
        $('.' + cls).addClass('hover');
    }
}, function() {
    $('.yes.hover').removeClass('hover');
});

因此，您在悬停事件中获取here*类并将类.hover应用于具有相同类的所有行。在悬停时 - 您删除所有额外添加的类

将鼠标悬停在两张桌子上？

1 个答案: