title: Change color of drop down selected option on hover
body: <p>I am trying to change the color of the initial (selected) text of my drop down menu on hover.  For example, if 4am is the selected option, the text should only change on hover for that option. However the CSS I am applying is applying it for EVERY option within the drop down whenever I hover and try to select an option.  </p>
  
  <p>The "selected" option is dynamic depending on what time of the day someone shows up at website.  I try to pre-select the closest hour to the time someone is visiting the website, which is why the hover is applied to the div rather than the selected option.</p>
  
  <pre><code>&lt;div class="dropDownHover"&gt;
  &lt;select&gt;
  &lt;option label="midnight" value="string:12:00 AM"&gt;midnight&lt;/option&gt;
  &lt;option label="12:30 AM" value="string:12:30 AM"&gt;12:30 AM&lt;/option&gt;
  &lt;option label="1:00 AM" value="string:1:00 AM"&gt;1:00 AM&lt;/option&gt;
  &lt;option label="2:00 AM" value="string:2:00 AM"&gt;2:00 AM&lt;/option&gt;
  &lt;option label="3:00 AM" value="string:3:00 AM"&gt;3:00 AM&lt;/option&gt;
  &lt;option label="4:00 AM" value="string:4:00 AM" selected="selected"&gt;4:00 AM&lt;/option&gt;
  ...
  &lt;/select&gt;
  &lt;/div&gt;
  
  //css
  .dropDownHover:{color: #333;}
  .dropDownHover:hover{color: #ff0000;}
  </code></pre>
  
  <p>Any thoughts on how I could limit the hover effect to just the selected option?</p>
  
  <p>Thanks in advance!</p>