The hover effect is not functioning properly after loading jQuery with load();

Question

When loading elements into a div using the load() function, I noticed that the :hover effect in CSS stops working for those elements.

It's a dynamic menu setup, as shown below:

<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 JavaScript:

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

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

The HTML code for the new menu looks like this:

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

In my CSS, I have defined:

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

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

Do you have any suggestions on how to resolve this issue?

Answer 1

Answer №1

Have you considered dynamically adding a CSS class using jQuery after the content has loaded?

Perhaps you could try something along these lines:

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

Answer 2

Have you considered dynamically adding a CSS class using jQuery after the content has loaded?

Perhaps you could try something along these lines:

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