0

画像を含むp個のタグがあり、ユーザーが画像タグにのみカーソルを合わせることができるようにしたいと思います。現在、ユーザーが画像にカーソルを合わせるmouseenterと、段落がトリガーされ、画像が表示さmouseenterれることはありません。

<p>Some text.. <img src="(URL)" /></p>

現在、mouseenterを使用しています。

    // Hover over a paragraph
    $("article p").mouseenter(function () {
        window.console.log("paragraph trigger");
        self.showControls(this, "p");
    });

    // Hover over an image in a paragraph
    $("article p img").mouseenter(function (e) {
        e.stopPropagation();
        window.console.log("image trigger");
        self.showControls(this, "img");
    });

ユーザーが相互に影響を与えずに段落またはその中の画像にカーソルを合わせることができるように、これを設定するにはどうすればよいですか？

4

2 に答える 2

2

テキストにスパンを追加し、それにラッチして、イベントハンドラーを分離します。

<p><span>Some text..</span> <img src="(URL)" /></p>

imgmouseenterでイベントもトリガーする場合は、イベントハンドラーspanを呼び出すことができます$("span").mouseenter();img

于 2013-01-17T15:54:05.860 に答える
1

mouseenter（）内にあるものを実行する前に少し遅延を設定し、トリガーする前にマウスがその領域内に1秒間留まるようにすることをお勧めします。

したがって、ユーザーが画像の前の段落にマウスを合わせると、段落の内容を表示するために1秒間カーソルを合わせる必要があります。

ここからのjQueryの例...これを問題に適合させたい場合があります。

$("#paragraph").hover(function() {
  $.data(this, "timer", setTimeout($.proxy(function() {
     $(this).click();
  }, this), 2000));
}, function() {
   clearTimeout($.data(this, "timer"));
});

イベントをトリガーする前に2秒待機しているようです（この場合はクリックしてください）。いずれにせよ、これは私がコーディングに向けて見ているものです。各要素のクリックをトリガーする前の遅延。

于 2013-01-17T15:51:18.257 に答える