jquery - 带有嵌套 div 的悬停列表项

Question

我使用的是旧的 jquery 版本，这就是下面使用 live() 的原因。

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

我的html结构：

<ul id="searchresult">
    <li>
         <div>a</div>
    </li>
</ul>

CSS：

.active { background-color: Red; }

我的代码适用于除 IE7 以外的所有浏览器。背景颜色闪烁，我猜这是因为它只在我悬停列表元素而不是 div 时发生变化。

有什么方法可以包含 div 吗？

更新：

小提琴

Answer 1

如果你只是简单地修改样式，你可以只使用:hoverCSS 中的伪类。

#searchresult li:hover {
    background-color: red;
}

DEMO（用于支持 IE7 的 jsfiddle“显示”视图）

更新：

根据您更新的小提琴示例，我相信这是由您的浮动元素引起的问题。

在以下示例中，我使用的是micro clearfix hack。确保将 clearfix 类（cf在本例中）添加到所有searchitem包含浮动子项的元素中。

HTML

<li class="searchitem cf">
    ...
</li>
...

CSS

/* For modern browsers */
 .cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom:1;
}

更新的演示