如何在 jQuery 的链接悬停时将类添加到下一个 td？答案

【问题标题】：How to addClass to the next td on link hover in jQuery?如何在 jQuery 的链接悬停时将类添加到下一个 td？
【发布时间】：2011-08-11 21:31:35
【问题描述】：

我有 6 个这样的 tds：

<td><a href="#">link</a></td>
<td>Some text here</td>

<td><a href="#">link</a></td>
<td>Some other text here</td>

<td><a href="#">link</a></td>
<td>Some other other text here</td>

我想在将鼠标悬停在指向下一个 td 的链接上后添加类。例如。如果我将鼠标悬停在第二个 td 的链接上，下一个 td 将有一个类，例如 active 像这样

<td><a href="#">link</a></td>
<td>Some text here</td>

<td><a href="#">link</a></td> <!-- hoovering over this link -->
<td class="active">Some other text here</td> <!-- and this td will have class active-->

<td><a href="#">link</a></td>
<td>Some other other text here</td>

如何做到这一点？

【问题讨论】：

标签： jquery hover addclass html-table

【解决方案1】：

$('a').hover(function(){
    $(this).parent().next().addClass('someclass');
}, function(){
    $(this).parent().next().removeClass('someclass');
});

【讨论】：

【解决方案2】：

jQuery(function($){
    $("a").hover(function(){
       $(this).parent().next("td").addClass("active");
    });
});

这里是fiddle

【讨论】：

【解决方案3】：

这不仅会在悬停时添加类，而且会在您将鼠标悬停在链接之外时将其删除。当您的页面上有其他标签时，它也可以工作。不只是 td 里面的人。

$(document).ready(function() {
    $("td > a").hover(function() {
       $(this).parent().next("td").toggleClass("active");
    });
});

【讨论】：