When i tried something like
<a href="#">
<i class="fa fa-icon-blah"></i>
<span>Something</span>
</a>
And the icon and the span are block elements the hover doesnt always seems to work.
I figured its because of the event.target check thats been
if(!$parent.hasClass('open') && !$parent.is(event.target)) {
And
if(!$parent.hasClass('open') && !$this.is(event.target) )
By changing these to:
if(!$parent.hasClass('open') && !$.contains($parent[0], $(event.target)[0])) {
And
if(!$parent.hasClass('open') && !$.contains($this[0], $(event.target)[0])) {
Seems to be fixing the issue.