Question

我正在尝试实现一个hover()功能，当一个<a>标签被悬停时，它还将为该<a>标签中的所有其他<tr>标签设置样式。当表格中的<a>标签之一悬停时，我想使其彼此同步，它们都将与给定表格行中的样式同步。

这是jsfiddle：https://jsfiddle.net/o2gxgz9r/73483/

使用closest()和parent()方法尝试了此代码，但无效：

JS：

$('#table-dropdown a').hover(function(){
    //$(this).parent().siblings('a').css('text-decoration', 'underline');
    $(this).closest('tr').siblings('a:not(.link)').css('text-decoration', 'underline');
    //$(this).parent().siblings('a').css('color', 'red !important');
    $(this).closest('tr').siblings('a:not(.link)').css('color', 'red !important');
});

HTML：

<table id="table-dropdown" style="border-collapse:collapse; border-color:initial; border-image:initial; border-width:1px; width:657px">
    <tbody>
        <tr>
            <td style="vertical-align:top; width:64px">
                <p><strong>Abbr</strong></p>
            </td>
            <td style="vertical-align:top; width:585px">
                <p><strong>Title</strong></p>
            </td>
        </tr>
        <tr>
            <td style="vertical-align:top; width:64px">
                <a class="AAA" href="#">AAA</a>
            </td>
            <td style="vertical-align:top; width:585px">
                <a class="AAA" href="#">Heading 1</a>
                <a class="link AAA" href="#"><span class="arrow"></span></a>

                <p id="AAA" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
            </td>
        </tr>
        <tr>
            <td style="vertical-align:top; width:64px">
                <a href="#">BBB</a>
            </td>
            <td style="vertical-align:top; width:585px">
                <a href="#">Heading 2</a>

            <p id="BBB" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
            </td>
        </tr>
        <tr>
            <td style="vertical-align:top; width:64px">
                <a href="#">CCC</a>
            </td>
            <td style="vertical-align:top; width:585px">
                <a href="#">Heading 3</a>

            <p id="CCC" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

我看到您已经找到了答案，但这是CSS发挥作用的理想场所。

CSS：

#table-dropdown tr:hover a {
    text-decoration:underline;
    color:red;
}

Working Demo

Answer 2

感谢罗宾的深刻见解。

工作示例：

$('#table-dropdown a').hover(function(){ // style multiple elements on hover action
    $(this).closest('tr').find('a').css('text-decoration', 'underline');
    $(this).closest('tr').find('a').css('color', 'red');
}, function(){ // hover out
    $(this).closest('tr').find('a').css('text-decoration', 'none');
    $(this).closest('tr').find('a').css('color', 'black');             
});

如何使用hover（）为多个特定元素设置样式？

2 个答案: