Using Jquery to keep opacity of one div, reduce opacity of rest on hover

Question

I am a bit stuck with this one. Here is a basic outline of my setup:

<div id="shell">

  <div class="subelement">One</div>

  <div class="subelement">One</div>

  <div class="subelement">One</div>

  <div class="subelement">One</div>

</div>

I'm looking to, on the hover of .subelement, decrease the opacity of the remaining divs with subelement class. I am aware of how to use hover effects with jQuery, just don't know where to start when it comes to animating the remaining divs that are not being hovered over. Thanks any for suggestions.

Update: Final Solution - http://jsfiddle.net/yqPFH/

Answer 1

While this question already has an answer, an additional answer was provided that I tweaked and has since been deleted. Here it is using jQuery and loses the hover state when nothing is hovered. Easy.

http://jsfiddle.net/kKHt4/3/

$(".subelement").hover( function() {
    $(this).siblings().stop().fadeTo("fast", 0.5);
}, function() {
    $(this).siblings().stop().fadeTo("fast", 1.0);
});

Using Jquery to keep opacity of one div, reduce opacity of rest on hover

Sign up