CODEWITHSUNDEEP
javascriptjqueryhtmlhover
jacktheripper
jacktheripper

Reputation: 14219

jQuery on hover opacity

I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".

If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).

Any help would be much appreciated. Thanks in advance.

Upvotes: 0

Views: 759

Answers (4)

David Thomas
David Thomas

Reputation: 253318

You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:

.hover:hover + .receiver {
    opacity: 0.5;
}

JS Fiddle demo.

And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):

.receiver {
    width: 50px;
    height: 50px;
    background-color: blue;
    opacity: 1;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.hover:hover + .receiver {
    opacity: 0.5;
    -webkit-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    transition: opacity 1s linear;
}
​

JS Fiddle demo.

  1. I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).

Upvotes: 5

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

Something like this would do it: http://jsfiddle.net/UzxPJ/3/

$(function(){
    $(".hover").hover(
        function(){
            $(this).siblings(".receiver").css("opacity", 0.5);    
        },
        function(){
            $(this).siblings(".receiver").css("opacity", 1);  
        }        
    );            
});​

References

.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/

.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/

Upvotes: 3

Dave Cottrell
Dave Cottrell

Reputation: 292

This works:

​$(document).ready(function() {
    $('.hover').hover(function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 0.5 });
    }, function() {
        var $parent = $(this).parent('.outerwrapper');
        $parent.find('.receiver').css({ opacity : 1 });
    });
});​

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

$('.hover').hover(function() {
    $(this).next('.receiver').css('opacity', 0.5);
}, function() {
    $(this).next('.receiver').css('opacity', 1.0);
});

http://jsfiddle.net/2K8B2/

(use .siblings or .nextAll if the .receiver is not necessarily the next element)

Upvotes: 2

Related Questions