Hovering list items with nested divs
<p>I'm using an old jquery version, that's why live() is used below.</p>

<pre><code>$('#searchresult li').live({
        mouseenter: function () {
            $(this).addClass('active');
        },
        mouseleave: function () {
            $(this).removeClass('active');
        }
});
</code></pre>

<p>My html structure:</p>

<pre><code>&lt;ul id="searchresult"&gt;
    &lt;li&gt;
         &lt;div&gt;a&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Css:</p>

<pre><code>.active { background-color: Red; }
</code></pre>

<p>My code works in every browser but IE7. The background color flickers, and I guess that's because it only changes when I hover the list element and not the div.</p>

<p>Is there any way to include the divs?</p>

<p>Update: </p>

<h1><a href="http://jsfiddle.net/yTsw5/3/show/" rel="nofollow">Fiddle</a></h1>
