CSS悬停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;
}