css：在jquery load（）之后悬停不起作用;

Question

我正在使用load（）函数将元素加载到div中。但是后来：css中的悬停效果不再适用于元素。

这是一个动态菜单，如下所示：

<div id='main-menu'>
<ul>
<li class='click-me hover-me'></li>
</ul>
</div>

<div id='alternative-menu'>
</div>

然后我将一个新菜单加载到替代菜单中，并在js中隐藏旧菜单：

$(document).on('click', '.click-me', function(){

    $('#alternative-menu').load('newmenu.php', function(){$('#main-menu').hide();});
});

新菜单的html代码如下所示：

echo "
    <ul>
    <li class='click-me hover-me'></li>
    </ul>";

在我的CSS中我有：

.hover-me{
font-size:12px;
}

.hover-me:hover{
background-color:#eeeeee;
}

任何想法如何解决？

Answer 1

如果您尝试在加载后使用jQuery添加正确的CSS类，该怎么办？

可能是这样的：

$('#alternative-menu').load('newmenu.php', function() {
    $('#main-menu').hide();
}).children("li").addClass("hover-me");