Question

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.

Answer 1

You don’t need to use jQuery, or JavaScript, for this (though you can¹), 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).