CSS Hover div 影响其他 div 在谷歌浏览器上不起作用

Question

我创建了一个网站，但悬停效果有问题。我在起始页上有 3 个 div 元素，当悬停这三个 div 中的一个时，我想使另外两个 div 透明。在 Mozilla Firefox 中一切都很好，但在 Google Chrome 上它不起作用（任何元素都不会应用不透明度）。这是临时地址上的网站 - http://letsdrink.fm4.pl/

这是我悬停此元素的代码：

#center:hover a {
    opacity:0.2;
}

#center:hover a:hover {
    opacity:1;
}
#center:hover a:hover .start-element-more {
    background:#8f1fe7;
}

以及部分代码

<div id="center">
<a href="Serwis-Kawowy">
<div id="start-element">Serwis kawowy
<div class="start-element-more">+ czytaj więcej</div>
</div></a> 
<a href="Obsluga-Barmanska">
<div id="start-element2">
Obsluga Barmanska
<div class="start-element-more">+ czytaj więcej</div>
</div></a> 
<a href="Kursy-Szkolenia">
<div id="start-element3">Kursy i szkolenia
<div class="start-element-more">+ czytaj więcej</div>
</div></a>
</div>

您可以在 firefox 和 chrome 上检查这一点 - 在 firefox 上一切正常。

Answer 1

#center:hover a,
#center:hover a >div {
    opacity: 0.2;
}
#center:hover a:hover,
#center:hover a > div:hover {
    opacity: 1;
}

Answer 2

你的解决方法：

#center:hover a,
#center:hover a > div {
    opacity:0.2;
}