hover child element only
<p>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 <code>mouseenter</code> and the image <code>mouseenter</code> never fires.</p>

<pre><code>&lt;p&gt;Some text.. &lt;img src="(URL)" /&gt;&lt;/p&gt;
</code></pre>

<p>I am currently using mouseenter.</p>

<pre><code>    // 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");
    });
</code></pre>

<p>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?</p>
