jquery hover multi elements of same class

Question

I have a table with the 12 months of the year (jan to dec)

I then have some of the months grouped together, ie: jan to apr = group1, mar to jun = group2

So all I wanna do is change the background colour of all the items with the same group name.

$('.group1').hover(function() {
    $(this).addClass('tbl_navGroupHover');
}, function() {
    $(this).removeClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $(this).addClass('tbl_navGroupHover');
}, function() {
    $(this).removeClass('tbl_navGroupHover');
});

http://jsfiddle.net/Q49Rd/1/

UPDATE, I went with this solution - tx for ur assistance:

<script>";
for ($i = 1; $i < 13; $i++) {
echo "$('.group$i').hover(function() {
    $('.group$i').addClass('tbl_navGroupHover');
}, function () {
    $('.group$i').removeClass('tbl_navGroupHover');
});";
}
echo "</script>";

we in 2012 use list for this kind of work. please avoid tables — GajendraSinghParihar
– GajendraSinghParihar, Commented Oct 8, 2012 at 15:10
and your answer is dont use this just specify the classname to change class name for all element of same group — GajendraSinghParihar
– GajendraSinghParihar, Commented Oct 8, 2012 at 15:11

Ram · Accepted Answer · 2012-10-08 15:07:17Z

3

Replace this with the group class name, you can also use toggleClass method.

$('.group1').hover(function() {
    $('.group1').toggleClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $('.group2').toggleClass('tbl_navGroupHover');
});

http://jsfiddle.net/5cAfR/

Please note that you haven't loaded jQuery in the fiddle.

answered Oct 8, 2012 at 15:07

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

War10ck · Accepted Answer · 2012-10-08 15:16:20Z

Not sure if this makes a difference but on the jquery documentation, the '.hover' function takes both a "handlerIn" and a "handlerOut" function.

You might try the following:

$('.group1').hover(function() {
    $('.group1').addClass('tbl_navGroupHover');
}, function() {
     $('.group1').removeClass('tbl_navGroupHover');
});

$('.group2').hover(function() {
    $('.group2').addClass('tbl_navGroupHover');
}, function () {
    $('.group2').removeClass('tbl_navGroupHover');
});

Not sure if this will make a difference or not. You may be able to specify only one function and get away with it. This will change the background color when one of the items is hovered over and then remove the coloring when you move off of the item.

Hope this helps.

GajendraSinghParihar · Accepted Answer · 2012-10-08 15:24:49Z

1

Don't use this use the class name insted to make change in all

$(this).addClass('tbl_navGroupHover');

Should BE

$(".group1").addClass('tbl_navGroupHover');

edited Oct 8, 2012 at 15:24

answered Oct 8, 2012 at 15:13

GajendraSinghParihar

9,16911 gold badges40 silver badges67 bronze badges

Collectives™ on Stack Overflow

jquery hover multi elements of same class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related