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

我有以下 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 就能做到吗？

EDIT:

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

另一个编辑：

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

不幸的是，你的结构对于 CSS 选择器来说太复杂了，因为a元素不是彼此的兄弟姐妹，而是你的内在divs，等等。

使用像 jQuery 这样的 JavaScript 库非常容易，否则你就运气不好了。