Question

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

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

有可能实现我想要做的事吗？

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

这不是我想要的。我需要每个导航栏都在单独的div中，但是我还没有能够通过这样做来使效果工作。我把这些代码放在一起只是为了让读者了解我想要实现的目标。

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

Answer 1

你总是可以通过使用共同的父元素“链接”两者来伪造它：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;   
}

如何“链接”两个相同导航栏的悬停效果

1 个答案: