相关疑难解决方法(0)

我有以下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 -->

我正在尝试做的是在一个人被徘徊时改变两个链接的状态.例如,如果我将鼠标悬停在'about'下,<div id="home">我希望两个链接,即一个和下一个链接,<div id="nav">以不透明度显示.

如果可能的话,我正试图远离JS.到目前为止,我对CSS的尝试一直是与相邻的选择器,但这对我来说是新的,所以我无法使它工作.

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

这可以用CSS完成吗？

编辑:

谢谢你的回复.我如何更改相邻选择器的HTML才能工作？如果它不会严重影响网站的其他部分(我现在的结构非常完整),我可以尝试一下并做一些调整.

另一个编辑:

好的,我已经阅读了更多关于这些选择器的内容,现在我明白了.我认为通过成为主要div中的所有人都是兄弟姐妹:P现在我明白为什么它不起作用.我会看看我是否可以提出一个仅使用CSS的解决方法,并将在此处发布.否则我会和JS一起去:(

代码说明胜于文字

<div class="parent">
  <span class="child"></span>
</div>
<div class="outside"></div>

我想做的事

.child:hover ? .outside { }

?我要寻找的选择器在哪里