title: How to change background color blue to grey for SELECT <OPTION> tag specifically when mouse hovers on options?
body: <p>I was able to achieve this by adding <code>size</code>, however if I remove this it wont show any longer. Thank you in advance.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
    &lt;select class="star" att="0" size="2"&gt;
      &lt;option&gt;Shell&lt;/option&gt;
      &lt;option&gt;Cabbage&lt;/option&gt;
      &lt;option&gt;Beans&lt;/option&gt;
      &lt;option&gt;Cheese&lt;/option&gt;
      &lt;option&gt;Clock&lt;/option&gt;
      &lt;option&gt;Monkey&lt;/option&gt;
    &lt;/select&gt;
    &lt;script&gt;
      $(document).ready(function(event) {
        $('select').on('mouseenter', 'option', function(e) {
          this.style.background = "#DCDCDC";
        });
        $('select').on('mouseleave', 'option', function(e) {
          this.style.background = "none";
        });
      });
    &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>