How to “link” the hover effects of two identical n

Question

I am wanting to create two identical nav bars on a site. What I want to do is "link" the :hover effects on each nav bar, so that when one link on NavBar1 is hovered, not only does the :hover effect display on NavBar1, but the same :hover effect should display simultaneously on the corresponsing link on NavBar2.

I've managed to get this to work one-way by using the adjacent sibling combinator in my CSS, but my problem is I can't seem to get it to work in reverse. In other words, when hovering over Link1 in NavBar1, the :hover effect displays on Link1 in NavBar1 and Link1 in NavBar2. However, when hovering over Link1 in NavBar2, the :hover effect displays on Link1 in NavBar2 only (because the adjacent sibling combinator affects only the element following it, not the preceding element).

Is it possible to achieve what I'm wanting to do here?

See what I mean here if I haven't explained clearly: http://jsfiddle.net/9AbvE/697/

This isn't exactly what I'm wanting. I need each nav bar to be in separate divs, but I haven't been able to get the effect to work yet by doing so. I've thrown this code together just to give readers an idea of what I'm trying to accomplish.

Notice the difference between selecting Link1 in the first list of links verses the second. I want the same effect when moving back and forth, and not just one-way (i.e. selecting the bottom "Link1" should turn both "Link1"'s black, just like selecting the top one does).

Answer 1

You could always fake it by "linking" the two using a common parent element: http://jsfiddle.net/jjordanca/TNeZU/

HTML:

<div id="navbar">
    <div id="linkone">
        <a class="one" href="#">Link1</a>
        <a class="one" href="#">Link1</a>
    </div>
    <div id="linktwo">
        <a class="two" href="#">Link2</a>
        <a class="two" href="#">Link2</a>
    </div>
    <div id="linkthree">
        <a class="three" href="#">Link3</a>
        <a class="three" href="#">Link3</a>
    </div>
</div>

CSS:

a {
    text-decoration: none;
    color: red;
    margin-right: 20px;
    padding: 0 10px;
}

#navbar {
    border: 1px solid red;
    width: 500px;
    margin: 50px;
    padding: 20px;
    height: 100px;
    position: relative;
}

#navbar div {
    text-align: center;
    width: 100px;
}

/* LINK 1 */

#linkone {
    position: absolute;
}

.one + .one {
    position: absolute;
    top: 80px;
    left: 0;
}

#linkone:hover {
    color: #000;
    background-color: #008800;
}

.one {
    position: absolute;
    left: 0;
    color: inherit;
    background-color: inherit;
}

/* LINK 2 */
#linktwo {
    position: absolute;
    left: 80px;
}

.two + .two {
    position: absolute;
    top: 80px;
    left: 0;
}

#linktwo:hover {
    color: #000;
    background-color: #008800;
}

.two {
    position: absolute;
    left: 0;
    color: inherit;
    background-color: inherit;
}

/* LINK 3 */
#linkthree {
    position: absolute;
    left: 140px;
}

.three + .three {
    position: absolute;
    top: 80px;
    left: 0;
}

#linkthree:hover {
    color: #000;
    background-color: #008800;
}

.three {
    position: absolute;
    left: 0;
    color: inherit;
    background-color: inherit;   
}