悬停时更改悬停 div 和另一个 div 的不透明度答案

【问题标题】：Change opacity of both hovered div and another div when hovering悬停时更改悬停 div 和另一个 div 的不透明度
【发布时间】：2015-01-04 03:36:53
【问题描述】：

我有两个 div 必须同时改变它们的不透明度，所以它们必须一起工作。两个 div 都具有特定的形式，因为它们是由 skew() 转换的，并且绝对定位在图像上。这意味着我不能将两个 div 包装到另一个顶级 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 的不透明度。在上面的 sn-p 中一切正常，但在我的 IDE 中却不行？！

我认为问题在于#top:nth-child(1):hover > #left 无法正常工作。我想知道为什么它在 sn-p 中有效，但在我的 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>

【问题讨论】：

Is there any way to hover over one element and affect a different element?的可能重复
@Moobs 不是重复的，而是相似的。我的问题更具体。我在您的链接中的问题中有一个解决方案，但我的问题是我不能使用 #top div 悬停，因为我的内部 div 具有适合底层图像的特定形式。所以我只能使用内部 div 来悬停，但我必须同时影响两者。这意味着当悬停一个内部 div 时，两者都必须更改其不透明度，反之亦然。

标签： html css hover opacity

【解决方案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

【讨论】：