html - 悬停时更改悬停的 div 和另一个 div 的不透明度

Question

我有两个 div，它们必须同时改变它们的不透明度，所以它们必须一起工作。两个 div 都有特定的形式，因为它们由 skew() 转换并且绝对定位在图像上。这意味着我无法将两个 div 包装到另一个 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>

现在的问题是:当我将鼠标悬停在第一个 div 上时，它的不透明度会发生变化，而第二个 div 的不透明度也会同时发生变化。到目前为止，一切都很好。当我将鼠标悬停在第二个 div 上时，它的不透明度会发生变化，但不会改变第一个 div 的不透明度。 在上面的代码片段中一切正常，但在我的 IDE 中却不行？!

我认为问题在于 #top:nth-child(1):hover > #left 无法正常工作。我想知道为什么它在代码片段中有效，但在我的 IDE 中却无效？!

在我的 IDE 中会发生这样的事情:

#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

我仍在等待纯 CSS 解决方案，但我可以使用 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