2

ノックアウト.jsを使用してmouseover、mouseout含む<div>. ハンドラーはブール値のオブザーバブルを切り替えます。内に<div>は、<p>可視性がこれらのブール値にバインドされている があります。つまり、 をロールオーバーすると、<div>が表示され<p>ます。の内容は<p>、モデル内のオブザーバブルにバインドされています。

私が見つけたのは、のバインドされたコンテンツに<p>インライン要素が含まれている場合です。たとえば<em>、内のテキストをロールオーバーすると、ちらつき<em>が発生します。<p>インライン要素でも同じことが起こるようです。の内容が<p>バインドされていない場合、問題は発生しません。

JQuerymouseenterとmouseleaveイベントを使用して、アプリケーションの回避策を見つけました。

このfiddleでは、3 つのケースすべてが示されています。

これは予想される動作ですか、バグですか、それとも私の側の見落としですか? JQuery イベントに依存しない回避策はありますか?

(この問題は、OS X 10.7.4 の Chrome 21.0、Safari 6.0、および FF 10.0.2、および Windows 7 の Chrome と IE で確認されています)

4

1 に答える 1

1

これは と の単なる違いでmouseleaveありmouseout、予期される動作です。これについては、こちらの記事で概説されています: http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/

これを行うとしたら、cssで行います。本当に何かを知る必要があるか、マウス ホバーに基づいて高度なアクション/操作を実行する必要がない限り、基本的な可視性を非常に簡単に制御できます (デモではノックアウトは必要ありません)。

http://jsfiddle.net/WLShQ/

HTML:

<div class="hoverbox">
    <p>Mouse over here...</p>
    <p class="extra">Then roll over <em>this red text</em></p>
    <p class="extra">It doesn't flicker!</p>
</div>

そしてcss

div.hoverbox p.extra {
    display: none;
}

div.hoverbox:hover p.extra {
    display: block;
}
于 2012-08-25T04:21:44.990 に答える