CODEWITHSUNDEEP
jqueryhtmlhoveropacity
Alex
Alex

Reputation: 13

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

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/

Upvotes: 0

Views: 935

Answers (4)

Violin
Violin

Reputation: 21

Two-part question:

1) How do you keep only the first line with opacity:1 and rest at .5 2) Once selected or hovered, how do you keep the opacity:1, UNTIL you hover/select another line?

Upvotes: 0

Sethen
Sethen

Reputation: 11348

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

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

I would've used CSS instead

Demo

Demo With Animations

HTML

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

CSS

#shell:hover {
    color: rgba(0,0,0,.5);
}

.subelement:hover {
    color: rgba(0,0,0,1);
}

Upvotes: 4

Dogbert
Dogbert

Reputation: 222158

$("#shell .subelement").hover(function() {
    $(this).css("opacity", 1).siblings().css("opacity", 0.6);
});

http://jsfiddle.net/EV833/1

Upvotes: 1

Related Questions