Stop ng-mouseenter and ng-mouseout from triggering on inner elements

I have an unordered list where each li is a fixed small size but when you hover over it, it will expand to full size. This is done via ng-mouseover and ng-mouseout. The problem is that some of the li text contains other markup ( for example) and when the mouse enters the tag, it triggers a mouseout event and collapses the li.

Obviously the desired behavior is to have the li remain enlarged while the mouse is inside it, even if it's over a child element. Does anyone have an idea on how to basically ignore the mouseover of an inner element? I would also need to ignore the mouseout of the li if it were going into a child element.