0

2 つのアイテムを含む div ボックスがあります。一方は他方の下にあります。したがって、下のアイテムがホバーされているときは、アニメーションにして上のアイテムからスライドさせます。

<div id="main">
        <div id="box"></div>
        <div id="item"></div>
</div>

CSS3 に関する私の知識では、アイテムをホバーでスライドさせるためのトランジションしかできませんでした。しかし、#main が #item ではなく hover のときに発生したいと考えています。そちらをご覧ください。 http://jsfiddle.net/sL3Pw/

4

1 に答える 1

0

その通りです。現在、純粋な CSS で子の親要素のスタイルを設定する方法はありません。目的の効果を実現する方法として JavaScript を使用できます。

（アップデート）

次のようにして JavaScript でこれを実現できます (DEMO: Fiddle )

JS

これは onload で実行する必要があります。実行しないと機能しません。

// On Hover
document.getElementById('main').onmouseover = function () {
    document.getElementById('item').classList.add("to-left"); // Add To Left Class
}

// OnMouseOut (Not Hover)
document.getElementById('main').onmouseout = function () {
    document.getElementById('item').classList.remove("to-left"); // Remove To Left Class
}

必要に応じて要素の ID を変更することを忘れないでください。

CSS

この CSS クラスを CSS に追加します

.to-left {
    margin-left: 60px;
}

そして、あなたの HTML は同じままです。これにより、希望する結果が得られるはずです。これがうまくいくかどうか教えてください。

于 2013-10-02T23:11:21.643 に答える