title: Hovering over an <option> in a select list
body: <p>I am trying to show a description when hovering over an option in a select list, however, I am having trouble getting the code to recognize when hovering.</p>
  <p>Relevant code:</p>
  <p>Select chunk of form:</p>
  <pre><code>&lt;select name=&quot;optionList&quot; id=&quot;optionList&quot; onclick=&quot;rankFeatures(false)&quot; size=&quot;5&quot;&gt;&lt;/select&gt;
  &lt;select name=&quot;ranks&quot; id=&quot;ranks&quot; size=&quot;5&quot;&gt;&lt;/select&gt;
  </code></pre>
  <p>Manipulating selects (arrays defined earlier):</p>
  <pre><code>function rankFeatures(create) {
      
      var $optionList = $(&quot;#optionList&quot;);
      var $ranks = $(&quot;#ranks&quot;);
      
  if(create == true) {
      for(i=0; i&lt;5; i++){
          $optionList.append(features[i]);
      };
  }
  else {
      var index = $optionList.val();
      $('#optionList option:selected').remove();
      $ranks.append(features[index]);
  };
  </code></pre>
  <p>}</p>
  <p>This all works.  It all falls apart when I try to deal with hovering over options:</p>
  <pre><code>$(document).ready( 
  
  function (event) {
  $('select').hover(function(e) {
      var $target = $(e.target);
      if($target.is('option')) {
          alert('yeah!');
      };
  })
  })
  </code></pre>
  <p>I found that code while searching through Stack Exchange, yet I am having no luck getting it to work.  The alert occurs when I click on an option. If I don't move the mouse and close the alert by hitting enter, it goes away.  If I close out with the mouse a second alert window pops up.  Just moving the mouse around the select occasionally results in an alert box popping up.</p>
  <p>I have tried targeting the options directly, but have had little success with that.  How do I get the alert to pop up if I hover over an option?</p>