1

サイトに 2 つの同一のナビゲーション バーを作成したいと考えています。私がやりたいのは:hover、各ナビゲーション バーの効果を「リンク」することです。これにより、NavBar1 の 1 つのリンクがホバーされると、 NavBar1 に効果が表示されるだけでなく、NavBar2の対応するリンクに:hoverも同じ効果が同時に表示されます。:hover

CSS で隣接する兄弟コンビネータを使用して、これを一方向に機能させることができましたが、逆に機能させることができないようです。つまり、NavBar1 の Link1:hoverにカーソルを合わせると、NavBar1 の Link1 と NavBar2 の Link1 に効果が表示されます。ただし、NavBar2 の Link1 にカーソルを合わせると、:hover効果は NavBar2 の Link1 にのみ表示されます (隣接する兄弟コンビネーターは、前の要素ではなく、それに続く要素にのみ影響するため)。

ここでやりたいことを達成することは可能ですか？

明確に説明していない場合は、ここで何を意味するかを確認してください: http://jsfiddle.net/9AbvE/697/

これはまさに私が望んでいるものではありません。各ナビゲーション バーを個別の div に配置する必要がありますが、そうすることでまだ効果を得ることができませんでした。私が達成しようとしていることを読者に理解してもらうために、このコードをまとめました。

リンクの最初のリストで Link1 を選択する場合と、2 番目のリストで選択する場合の違いに注意してください。一方向だけでなく、前後に移動するときにも同じ効果が必要です（つまり、一番上のものを選択するのと同じように、一番下の「Link1」を選択すると、両方の「Link1」が黒くなります）。

4

1 に答える 1

0

共通の親要素を使用して2つを「リンク」することで、いつでも偽造できます：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 に答える