将鼠标悬停在其中一个链接上时，CSS 会更改两个链接

Question

我有以下 html:

<div id="main">
    <div id="home" class="section">
        <ul>
            <li class="home_li"><a href="#home" class="goto_home">Home</a></li>
            <li class="about_li"><a href="#about" class="goto_about">About us</a></li>
            <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
        </ul>
    </div>  <!-- End home -->

    <div id="nav">
        <ul>
            <li class="home_li"><a href="#home" class="goto_home"></a></li>
            <li class="about_li"><a href="#about" class="goto_about"></a></li>
            <li class="contact_li"><a href="#contact" class="goto_contact">Contact</a></li>
        </ul>
    </div>  <!-- End nav -->
</div>  <!-- End main -->

我想做的是在悬停一个链接时更改两个链接的状态。例如，如果我将鼠标悬停在 <div id="home"> 下的“关于”上我想要两个链接，一个和 <div id="nav"> 下的那个, 以不透明度显示。

如果可能的话，我尽量远离 JS。到目前为止，我对 CSS 的尝试一直是使用相邻的选择器，但这对我来说是新的，所以我无法让它发挥作用。

    #home .about_li a:hover + #nav .about_li a {
        opacity: .5;
    }

这可以只用 CSS 来完成吗？

编辑:

感谢您的回复。我需要如何更改相邻选择器的 HTML 才能工作？如果它不会严重影响站点的其余部分(结构现在已经基本完成)，我可以尝试并进行一些调整。

另一个编辑:

好的，我已经阅读了更多关于这些选择器的内容，现在我明白了。我曾认为，通过全部位于主 div 中，它们是 sibling :P 现在我明白了为什么它不起作用。我会看看我是否可以想出一个仅使用 CSS 的解决方法，并将在此处发回。否则我会选择 JS :(

Answer 1

不幸的是，您的结构对于单独的 CSS 选择器来说太复杂了，因为 a 元素不是彼此的 sibling ，但它是您内部的 div，因此上。

使用 jQuery 等 JavaScript 库非常容易，否则你就不走运了。