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?

EDIT:

Спасибо за ваши ответы. Как мне нужно изменить HTML для работы смежного селектора? Я мог бы попробовать и сделать несколько изменений, если это не окажет серьезного влияния на остальную часть сайта (структура в настоящее время в значительной степени завершена).

ДРУГОЕ РЕДАКТИРОВАНИЕ:

Хорошо, я прочитал еще немного об этих селекторах, и теперь я понял. Я думал, что, находясь внутри основного div, они были братьями и сестрами: P, и теперь я понимаю, почему это не работает. Я посмотрю, смогу ли я придумать обходной путь, чтобы использовать только CSS, и опубликую здесь. В противном случае я пойду с JS: (

Answer 1

К сожалению, ваша структура слишком сложна только для CSS-селекторов, поскольку элементы a не являются родственными элементами, но это ваши внутренние div s и т. Д.

Это очень просто с библиотеками JavaScript, такими как jQuery, иначе вам не повезет.

Answer 2

Это нельзя сделать с помощью CSS; хотя я приветствую ваши попытки не загружать кучу JS, особенно тяжеловесных библиотек.

Answer 3

нет, если вы не собираетесь менять структуру HTML или можете использовать jQuery