如何“链接”两个相同导航栏的悬停效果 [英] How to "link" the hover effects of two identical nav bars

问题描述

我想在网站上建立两个相同的导览列。我想做的是在每个导航栏上链接：hover 效果，这样当NavBar1上的一个链接被徘徊时，不仅：hover 效果显示在NavBar1上，但同一：hover 效果应同时显示在NavBar2上的对应链接上。

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.

我已经设法通过在我的CSS中使用相邻的兄弟组合器单向工作，但我的问题是我似乎不能让它反向工作。换句话说，当在NavBar1中将鼠标悬停在Link1上时，：hover 效果将显示在NavBar1中的Link1和NavBar2中的Link1。但是，当在NavBar2中将鼠标悬停在Link1上时，仅会在NavBar2中的Link1上显示：hover 效果（因为相邻的同级组合器仅影响其后面的元素， 。

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?

如果我没有清楚解释，看看我的意思： http://jsfiddle.net/9AbvE/697/

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

这不是我想要的。我需要每个导航栏在不同的div，但我还没有能够通过这样做的效果。我已经把这个代码放在一起，只是为了给读者一个想要完成的事情。

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.

请注意，在第一个链接列表中选择Link1的区别第二。我想要相同的效果，当来回移动，而不只是单向（即选择底部链接1应该使两个链接1的黑色，就像选择顶部的一样）。

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).

推荐答案

你可以通过使用一个共同的父元素链接两者来伪造它： http://jsfiddle.net/jjordanca/TNeZU/

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;   
}

这篇关于如何“链接”两个相同导航栏的悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！