CODEWITHSUNDEEP
jquery
Chris Bier
Chris Bier

Reputation: 14437

hover child element only

I have p tags with images in them, and I want the user to be able to hover the image tag only. Currently, when the user hovers the image, it triggers the paragraph mouseenter and the image mouseenter never fires.

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

I am currently using 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");
    });

How can I set this up so that the user can hover over the paragraph or the image inside of it without having them effect each other?

Upvotes: 0

Views: 78

Answers (2)

Matanya
Matanya

Reputation: 6346

Add a span to the text and latch on to it, to separate the event handlers.:

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

if you want the img mouseenter to also trigger the span event, you can call $("span").mouseenter(); in your img event handler

Upvotes: 2

Jimbo
Jimbo

Reputation: 26513

I would suggest putting a small delay on the mouseenter() before running whatever is in it, and require the mouse to stay within that area for say, a second before triggering.

Therefore if the user mouses over the paragraph before the image, they need to hover for a second to see anything for the paragraph.

jQuery EXAMPLE from here... You may wish to fit this to your problem.

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

That looks like it's waiting two seconds before triggering an event (click in this case). Either way, this is what I would look towards coding; a delay before triggering a click on each element.

Upvotes: 1

Related Questions