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

Question

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?

Answer 1

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