4

テーブル行のオーバーレイを作成しようとしています。ユーザーのマウスが1秒ほど行に置かれた後にオーバーレイを表示し、マウスが行を離れたらオーバーレイを削除したいと思います。私はこれに取り組み始めました：http：//jsfiddle.net/YCZ3J/

私はいくつかのことに固執しています：

  1. 行内でマウスを移動すると、mouseenterイベントが発生し続けます。理由がわかりません。
  2. 画像TDを除いて、オーバーレイで行をカバーしたいのですが、それでもあまり成功していません。
  3. オーバーレイ上に各行に異なるテキスト/ボタンを配置したいと思います。各TRにdivを追加してを使用してみまし.parent().('.overlay')たが、それを機能させることができませんでした。

どんな助けでも大歓迎です。ありがとうございました！

編集：いくつかのポインタの後、ここに私のすべての要件が満たされた動作中のフィドルがあります：http: //jsfiddle.net/YCZ3J/37/

編集2：グリッチの問題を解決するため、hoverIntentjqueryプラグインを使用することになりました。

4

1 に答える 1

3

私は最初の質問のためにあなたを助けることができます：あなたはmouseenterの代わりにmouseoverを使うべきです詳細についてはこのリンクを見てください。

編集：ああ！マウスリーブを維持してoverlay.hideをトリガーします

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

編集：ここに更新があります、http：//jsfiddle.net/YCZ3J/32/ Overlay.cssに右に配置した「0px」、幅：「66.7％」を参照してください。画像が空いたままになります。

ご覧のとおり、オーバーレイを移動するためにオーバーレイを他のオーバーレイにマウスを置いたままにすると、グリッチが発生し、スライドアップトランジションが完了し、1秒後に再び下にスライドします。

于 2012-05-05T09:51:35.117 に答える