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">下的'about'上，我希望两个链接，即<div id="nav">下的一个链接显示为不透明度。

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

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

这可以只使用CSS吗？

编辑：

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

另一个编辑：

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

Answer 1

不幸的是，你的结构对于CSS选择器而言过于复杂，因为a元素不是彼此的兄弟，但它是你的内部div，依此类推。

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

Answer 2

不，如果您不打算更改HTML结构，或者您可以使用jQuery

Answer 3

使用CSS无法做到这一点;虽然我赞赏你努力远离加载一堆JS，特别是重量级的库。

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

3 个答案: