1

私は現在、大学で実験的なページを作成していますが、大量の脳が焼けるという単純な問題に遭遇しました。アイデアは、サイトをナビゲートするために何もクリックする必要がないということであり、ユーザーに非常に流動的で軽い体験を提供します。

さて、私はこのリストを持っています、それの各アイテムはdivをトリガーしてやって来て素敵にする必要があります。私はCSS3の兄弟セレクターチルダを試していて、liが呼び出されたときにdivにleft：0を持たせました。唯一の問題は、オブジェクトに独自の親がない場合にのみ、シンブリングセレクターが機能することです。「＃father-element＃child-element：hover〜＃father-element2＃child-element 2」のように穴の家族と呼んでみましたが、私はある種の馬鹿のように完全に無視されます。

ヘッドバーナーの簡略版のリンクは次のとおりです。http：//jsfiddle.net/GuiHarrison/rDnYE/

それで、皆さん、どう思いますか？シャットダウンしてjQueryを試す必要がありますか（もしそうなら、どのように？）、それともCSSに本当に方法がありますか？

4

1 に答える 1

1

以下に示すマークアップを変更することで、これを実現できます。

HTML:

<ul>
    <li id="cinco">item1</li>
    <li id="seis">item2</li>
    <li id="sete">item3</li>
    <li id="oito">item4</li>

    // As you've defined these items' position as absolute so no matter if you define them as list items.
    <li id="e">
        <div>This should work now - cinco</div>
    </li>
    <li id="f">
        <div>This should work now - seis</div>
    </li>
    <li id="g">
        <div>This should work now - sete</div>
    </li>
    <li id="h">
        <div>This should work now - oito</div>
    </li>
</ul>

CSS:

    ul {margin-top:10px; position: relative}
    ul li#cinco:hover ~ #e,
    ul li#seis:hover ~ #f,
    ul li#sete:hover ~ #g,
    ul li#oito:hover ~ #h { left:300px; background-color:#BADA55; }

ここでデモを参照してください: http://jsfiddle.net/rathoreahsan/gew5B/

于 2012-06-22T04:52:39.277 に答える