javascript - CSS :hover not working after jquery load();

Question

我正在使用 load() 函数将元素加载到 div 中。但是 css 中的 :hover 效果不再适用于 does 元素。

这是一个动态菜单，像这样:

<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");