Best Practices catching mouse events in jQuery over compound <div>s
<p>I'm looking the best way approuch to capture mouse events in HTML s. When you have compound divs, with texts, images and other s, so what I do is put a layer over everything to catch the mouse.</p>

<p>This may lead to further problems since this layer can avoid you to catch other parts of your composition, obligating you to extend this methodology.</p>

<p>I'm clearly influenced by my past as flash programmer when you had to do the same using Sprite.graphics.</p>

<p>I usually do like this:</p>

<pre><code>&lt;div class="photo-element"&gt;
   &lt;div class="photo-element-image"&gt;&lt;img src="..."/&gt;&lt;/div&gt;
   &lt;div class="photo-element-title"&gt;Some Title&lt;/div&gt;
   &lt;div class="photo-element-mouse-wrapper"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Styling like this:</p>

<pre><code>.photo-element-mouse-wrapper
{
    width:70px;
    height:70px;    
}

.photo-element-title
{
    position:absolute;
    top: 5px;
    ...
}

.photo-element-image
{
    position:absolute;
    top: 0px;
    ...
}

.photo-element
{
    width:70px;
    height:70px;
    position:relative;
}
</code></pre>

<p>Finally jQuery would be:</p>

<pre><code>$('.photo-element-mouse-wrapper').mouseover(function() {
    //code
});
</code></pre>

<p>My question is:</p>

<p>Is this the best way to catch mouse events?</p>
