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

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

1 个答案: