0

これについては、Fiddleを確認する必要があります。

私が問題を抱えている要素は、体のどの部分がホバリングされていhoverHelperても表示することを目的としていますが、アニメーションが完了した後にのみ表示されますnext

アニメーションが終了すると、要素を表示するためのイベントを適用するために、フロートされた (要素フローからそれを取り除くための) 透明なオーバーレイhoverHelperに、ページ全体をカバーするために途方もなく高い幅と高さが与えられます。hovernext

私の問題は、本質的に、フロート要素がホバーされると、ホバーを登録して本来の動作をするが、他の要素が悪影響を受けることです。何らかの理由で、ブラウザーはすべての後続の要素を非浮動要素のように扱いますが、決して失うことはありませんfloat:left。これは、アンカーと他の後続の要素が何千ピクセルも下に押し出されることを意味し、これは受け入れられません。

この動作を確認する最も簡単な方法は、要素を調べて を強制:hoverすることactualHoverです。hoverHelper次に、浮動要素を非浮動要素のように扱う方法を確認します

以下は私のHTMLと関連するCSSです

<div id='hoverHelper'></div>
<div id='actualHover'></div>
<a href="#" id='next'>Next</a>
<div class='other'></div>

body { overflow:hidden; max-width:200px; max-height:200px;}
#hoverHelper {
    width:0px;
    height:0px;
    z-index:1;
    position:relative;
    float:left;
    margin-top:-1000px;
    margin-left:-1000px;
    animation: hhAnimation .001s 3s forwards;
}
#actualHover {
    width:50px;
    height:50px;
    background:teal;
    animation: yourAnimation 3s linear forwards;
}
#next {
    z-index:2;
    display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
    display:inline-block;
}

また、私はもともとposition:absoluteオーバーレイで使用していましたが、それによってnextボタンがクリックされなくなりました。これも受け入れられません

自分のしていることは型破りであることは理解していますが、私にとってこれは完全に理にかなっています。何が起こっているかについての洞察はありますか？

ノート：

この質問は、見つかった問題ではなく、別の解決策によって解決されました。フロート要素がその動作をする理由はまだわかりません

4

1 に答える 1

1

float を介してフローから要素を削除するのではなく、 を使用しますposition:absolute。

これが で問題を引き起こしているとおっしゃいましたが、その#nextようなものを追加するposition:relativeと、クリック可能になります。Az-indexは、配置された要素にのみ影響します。

ここで jsFiddleを作業 - ヘルパーホバーに半透明の背景を追加して、デモを行いました。

于 2013-10-18T20:48:25.637 に答える