Question

I’m loading elements into a div using the load() function. But then the :hover effect in css does no longer work for does elements.

it’s a dynamic menu, like this:

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

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

then i load a new menu into the alternative menu and hide the old one in js:

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

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

the new menu’s html code looks like this:

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

in my css i have:

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

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

any ideas how to fix it?

Answer 1

What if you try to add the proper CSS class using jQuery after it’s been loaded.

Maybe something like:

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