0

そのため、何らかの理由で FireFox / IE でホバーが点滅し続けますが、その理由はよくわかりません。JavaScriptでホバーを行う方が良いですか、それともCSSで簡単に修正できますか? ここに私が何を意味するかを示すJSFiddleがあります - http://jsfiddle.net/eRBCa/

HTML

<div>
    <div id="div1"></div>
    <div id="div2">Test Div</div>
</div>

CSS

#div1{
    width: 300px;
    height: 275px;
    background-color: yellow;
}

#div1:hover  + #div2{
    display: block;
}

#div2{
    background-color: grey;
    width: 300px;
    height: 275px;
    margin-top: -275px;
    opacity: .9;
    display: none;
}
4

4 に答える 4

4

(多くの技術的な詳細には触れずに):hoverセレクターは、Chrome では Firefox や IE とは異なる動作をするようです。つまり、#div2表示されると、「ホバー」要素になり#div1、「ホバー」「属性」を失います (FF または IE)。それがちらつきの原因です。

次のように CSS を変更することで、これを修正できます。

#div1:hover + #div2, 
#div2:hover {
display: block;
}

この短いデモも参照してください。

于 2013-06-10T11:31:06.820 に答える
1

オーバーレイを表示すると、マウスが元のオーバーレイ (#div1) ではなくオーバーレイにホバリングするため、ジッター効果が作成されます。代わりに親要素がホバーされているかどうかを確認することで、これを修正できます。

/* instead of #div1:hover + #div2, where .container is a class on the parent */
.container:hover #div2 {
    display: block;
}

http://jsfiddle.net/eRBCa/1/

于 2013-06-10T11:30:59.427 に答える
0

html の早い段階でアクションを呼び出す必要があります。
div1 にカーソルを合わせると、div2 が一番上に来るので、div2 にカーソルを合わせると、それらは隣接します。
http://jsfiddle.net/GPCh3/ 

<div id="call">
    <div id="div1"></div>
    <div id="div2">Test Div</div>
</div>

#div1{
    width: 300px;
    height: 275px;
    background-color: yellow;
}

#call:hover   #div2{
    display: block;
}

#div2{
    background-color: grey;
    width: 300px;
    height: 275px;
    margin-top: -275px;
    opacity: .9;
    display: none;
}
于 2013-06-10T11:38:29.957 に答える