Question

I have a menu that will be generated in php that will have the possibility of having two different child divs within it. Long story short, the php will add a div with a class name of “showBubbles” within the “li”, and/or another div with the class of “hideLogo.” I need to execute one function if “showBubbles” div is present, and another function if “hideLogo” is present. How can I do this on mouse hover?
The structure looks like this:

<ul>
<li>
    <a href="#"><img src="imagePlaceholder" /></a>
    <div class="showBubbles"></div>
    <div class="hideLogo"></div>
</li>
</ul>

Answer 1

Not tested but this should do the trick.

$('ul').on('mouseover', 'li', function(e)
{
    if($(this).children('div').hasClass('showBubbles'))
    {
        // Execute code for showBubbles div
    }
    else
    {
        // Execute code if 'showBubbles' is not present
    }
}