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>

possible duplicate of [Is there any way to hover over one element and affect a different element?](http://stackoverflow.com/questions/6867257/is-there-any-way-to-hover-over-one-element-and-affect-a-different-element) — Turnip, Nov 07 '14 at 11:14
@Moobs Not a duplicate but similar. My question is more specific. I had a solution like in the question in your link but my problem is that I cannot use the `#top` div to hover since my inner divs have a specific form which were adapted to the underlying image. So I can ONLY use the inner divs to hover but I have to affect both at the same time. That means when **hovering one inner div both must change their opacity and vice versa**. — Ilker Cat, Nov 07 '14 at 11:54

score 0 · Accepted Answer · answered Nov 07 '14 at 14:27

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

Change opacity of both hovered div and another div when hovering

1 Answers1