I have the following 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 -->
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.
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;
}
Can this be done with only CSS?
EDIT:
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).
ANOTHER EDIT:
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 :(
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 div
s, and so on.
It's very easy with JavaScript libraries like jQuery, otherwise you're out of luck.
no, if you are not going to change HTML structure, or you can use jQuery
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With