Fiddle

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？

更新：

Fiddle

Answer 1

如果您只是修改样式，可以在CSS中使用:hover伪类。

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

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

<强>更新

根据您的updated fiddle example，我认为这是由floated elements引起的问题。

在下面的例子中，我正在使用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;
}

<强> UPDATED DEMO

使用嵌套div悬停列表项

Fiddle

1 个答案: