当将鼠标悬停在其中一个上时，CSS更改两个链接 [英] CSS change two links when hovering over either one of them

问题描述

我有以下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> ，以透明度显示。

What I'm trying to do is change the state of both links when one is being hovered. For example, if I hover over 'about' under <div id="home"> I want both links, that one and the one under <div id="nav">, to be displayed with opacity.

我试图远离JS if可能。到目前为止，我尝试使用CSS已经与相邻的选择器，但这是新的，所以我一直无法使其工作。

I'm trying to stay away from JS if possible. So far my attempt with CSS has been with adjacent selectors but that's new to me so I haven't been able to make it work.

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

这可以用CSS吗？

编辑：

感谢您的回复。如何更改相邻选择器的HTML工作？我可以试一试，并做一些调整，如果它不会严重影响网站的其余部分（结构现在几乎完成了）。

Thanks for your replies. How would I need to change the HTML for the adjacent selector to work? I could give it a try and make a few tweaks if it doesn't affect seriously the rest of the site (the structure is pretty much complete by now).

其他编辑：

好吧，我已经阅读了关于这些选择器的更多信息，现在我得到它。我认为，通过将所有内部的主要的div他们是兄弟姐妹：P，现在我明白为什么它不工作。我会看看是否可以想出一个解决方法，只使用CSS，并将在这里发布。否则，我会使用JS：（

Okay, I've read some more about these selectors and now I get it. I'd thought that by being all inside the main div they were siblings :P and now I see why it doesn't work. I'll see if I can come up with a workaround to use only CSS and will post back here. Otherwise I'll go with JS :(

推荐答案

不幸的是，你的结构对于CSS选择器来说太复杂， c $ c> a 元素不是彼此的兄弟，但它是你的内部 div s等。

Unfortunately, your structure is too complex for CSS selectors alone, as the a elements aren't siblings of each other, but it's your inner divs, and so on.

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

It's very easy with JavaScript libraries like jQuery, otherwise you're out of luck.

这篇关于当将鼠标悬停在其中一个上时，CSS更改两个链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！