Change opacity of both hovered div and another div when hovering

Question

I have two divs which have to change their opacity at the same time, so they have to work togehter. Both divs have a specific form because they are transformed by skew() and are absolute positioned over an image. This means that I cannot wrap the two divs into another top-div.

 #top { background-color: red; width: 200px; } #left { width: 200px; opacity: 0; } #right { text-align: right; width: 200px; opacity: 0; } #left:hover, #left:hover ~ #right, #right:hover, #top:nth-child(1):hover > #left { background-color: rgba(0, 150, 150, 0.4); opacity: 1; } 

 <div id="top"> <div id="left">LEFT</div> <div id="right">RIGHT</div> </div> 

Now the question: When I'm hovering over the first div it's opacity changes and the opacity of the second div also changes at the same time. So far so good. When I hover over the second div it's opacity changes but not the opacity of the first div. In the snippet above everything works fine but not in my IDE?!

I think that the problem is that #top:nth-child(1):hover > #left does not work properly. I'm wondering why it works in the snippet but not in my IDE?!

In my IDE something like this happens:

 #top { background-color: red; width: 200px; } #left { width: 200px; opacity: 0; } #right { text-align: right; width: 200px; opacity: 0; } #left:hover, #left:hover ~ #right, #right:hover, #right:hover ~ #left { background-color: rgba(0, 150, 150, 0.4); opacity: 1; } 

 <div id="top"> <div id="left">LEFT</div> <div id="right">RIGHT</div> </div> 

Answer 1

I'm still waiting for a CSS only solution but I could help myself using jQuery:

$(document).ready(function() {
  $('#right').hover(function() { 
    $('#left').css({'background-color': 'rgba(0, 150, 150, 0.4)',
                    'opacity': '1'});
  }, function(){
    $('#left').css({'background-color': '',
                    'opacity': ''});
  });
});

JSFiddle Demo