开发者

How to addClass to the next td on link hover in jQuery?

开发者 https://www.devze.com 2023-03-27 02:17 出处:网络
I have 6 tds like this: <td><a href=\"#\">link</a></td> <td>Some text here</td>

I have 6 tds like this:

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

And I would like to addClass after hover over a link to the next td. E.g. If I hover over the a link from the second td the next td will have a cl开发者_如何学编程ass for instance active like this

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

How to do this?


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


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

Here is the fiddle


This will not only add class on hover but also remove it when you hover out of a link. It also works when you have other tags on your page. Not only those inside td.

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

精彩评论

暂无评论...
验证码 换一张
取 消