Hover event not triggered when hovering over inner HTML element

[sjieg]

Hello, first off, thanks for this plug-in. It's a great help getting some font awesome icons inside drop-downs.

When a HTML element inside the dropdown is 100% of the height of the option, the hover event is not triggered due to the following piece of code in hoverDropdownItem:

e.target.nodeName !== 'LI'

From your example, I've added .glyphicon{height: 48}

<label for="spell">With prefix/suffix:</label><br>
<select id="spell" name="spell" title="Select your spell">
  <option data-prefix="<span aria-hidden='true' class='glyphicon glyphicon-eye-open'></span>" data-suffix="<small>petrification</small>">Eye of Medusa</option>
  <option data-prefix="<span aria-hidden='true' class='glyphicon glyphicon-fire'></span>" data-suffix="<small>area damage</small>">Rain of Fire</option>
</select>
<script>
$(document).ready(function() {
  // Initiate Pretty Dropdowns
  $('#spell').prettyDropdown({
    afterLoad: function() {
      console.log('Spells are ready!');
    }
  });
});
</script>
<style>
.glyphicon{height: 48}
</style>

When using the dropdown, and hovering over the icons, the hover event won't trigger.

I've solved this on changing:

if (e.target.nodeName!=='LI' || !$dropdown.hasClass('active') || new Date()-$dropdown.data('lastKeypress')<200) return;

To

let target = (e.target.nodeName !== 'LI') ? e.target.parent('li') : e.target
if (target !== 'LI' || !$dropdown.hasClass('active') || new Date() - $dropdown.data('lastKeypress') < 200) return;

I'm not sure why you're checking of the target is a li, but I thought to keep it in not to break anything new :)