如何在选择选择框上捕获悬停事件

Question

I am am using Brian Reavis' excellent Selectize.js to add functionality to my select inputs.

But I am struggling to add an event handler when the user hovers their mouse above a selectized option. I can see no events documented in the API for this kind of event.

I can see that selectize created its own divs like this

<div data-value="my value" data-selectable="" class="option">my label</div>

and that as I move my mouse over each option the class changes from

class="option" to class="option active" and back again.

But I just cant see a way to add my own handler to these events. Please can someone help.

Many Thanks

Alec

Answer 1

use the mouseenter on the div inside .selectize-dropdown-content

 $('.selectize-control').on('mouseenter', '.selectize-dropdown-content div', function() { alert($(this).text()) }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.min.js"></script> <div class="control-group"> <select id="select-beast" class="demo-default" placeholder="Select a person..."> <option value="">Select a person...</option> <option value="4">Thomas Edison</option> <option value="1">Nikola</option> <option value="3">Nikola Tesla</option> <option value="5">Arnold Schwarzenegger</option> </select> </div> <script> $('#select-beast').selectize({ maxItems: 3 }); </script>