テーブル行のオーバーレイ

Question

Iテーブル行のオーバーレイを作成しようとしています。ユーザーのマウスが2秒ほど行の上に表示された後にオーバーレイを表示し、マウスが行を離れるとオーバーレイを削除します。 http://jsfiddle.net/YCZ3J/

、私はいくつかに引っかかっています：

1. MouseEnterイベントは、行の内側にマウスを移動したときに発射し続ける 私はこの上で作業を開始しました。なぜ私は理解できません。
2. イメージTDを除いて、オーバーレイが行を覆いたいと思っていますが、そのどちらも成功していません。
3. 私は、各行がオーバーレイ上に異なるテキスト/ボタンを持つようにします。私は各TRにdivを追加して、.parent().('.overlay')を使用してみましたが、動作させることができませんでした。

ご協力いただきますようお願い申し上げます。 ありがとうございました！

編集：いくつかのポインタの後、ここではすべての私の要件が満たさで作業フィドルです：http://jsfiddle.net/YCZ3J/37/

編集2：それはグリッチの問題を解決しますので、私は、hoverIntentのjQueryプラグインと一緒に行くことになりました。

Answer 1

私は最初の質問のためにあなたを助けることができる：MouseEnterイベントはそう動いて、現在のdivとすべての親のために起動したとき、あなたが代わりでは、MouseEnterイベントがより多くの情報のためthis linkを参照してくださいマウスオーバーを使用する必要がありますが、基本的にマウスオーバーだけで、現在のdivのトリガーマウスは親divのマウス・センターを起動し続けます。

： oh！そしてあなたがoverlay.mouseleaveするoverlay.hideをバインドする必要があります。（つまり、オーバーレイはそれの前にあるので、マウスがオーバーレイではなく、行を離れるとき）overlay.hide

をトリガするために

をmouseleaveを保ちますを編集してください：http://jsfiddle.net/YCZ3J/32/ここをクリックしてください： '0px'、width：'66,7％ 'をOverlay.cssに入れて、画像を自由にします。

オーバーレイを移動するためにオーバーレイをマウスで離したときにグリッジが発生し、1秒後にスライドアップの遷移が完了して再びスライドします。