Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery: select all elements of a given class on hover, except for this

I have ten elements on a page with the same class.

When I hover over one of them I want to alter the other nine.

Here's what I have so far...

$("*[class='myClass']:not(this)").css({"top":"10px"});

Any ideas?

like image 282
Tom Avatar asked Feb 18 '23 08:02

Tom


1 Answers

Using the attribute selector to select by class is a little redundant (not to mention slow) as there is a class selector. Try this:

$(".myClass").mouseover(function() {
    $('.myClass').not(this).css({"top":"10px"});
});

If you want to reset the effect on mouseout, use hover() with two function parameters. Also, it's better in this case to use a class.

$(".myClass").hover(function() {
    $('.myClass').not(this).addClass('foo');
},
function() {
     $('.myClass').not(this).removeClass('foo');
});
.foo { top: 10px; }
like image 148
Rory McCrossan Avatar answered Feb 21 '23 01:02

Rory McCrossan