1

我想在一个站点上创建两个相同的导航栏。我要做的是“链接”:hover每个导航栏上的效果，这样当 NavBar1 上的一个链接悬停时，不仅:hover效果会显示在 NavBar1 上，而且相同的:hover效果应该同时显示在 NavBar2 上的相应链接上。

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

是否有可能实现我想要在这里做的事情？

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

这不是我想要的。我需要每个导航栏位于单独的 div 中，但我还无法通过这样做来获得效果。我将这段代码放在一起只是为了让读者了解我想要完成的工作。

请注意在第一个链接列表中选择 Link1 与第二个之间的区别。来回移动时我想要相同的效果，而不仅仅是单向（即选择底部的“Link1”应该将“Link1”的两个都变成黑色，就像选择顶部的一样）。

4

1 回答 1

0

您总是可以通过使用共同的父元素“链接”两者来伪造它：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;   
}
于 2013-08-19T11:38:57.013 回答