title: During onHover, how to make HTML dropdown elements adopt a new background color that is unique for each dropdown element?
body: <p>Is it possible onHover to make HTML dropdown elements adopt a new background color that is unique for each dropdown element?</p>
  
  <p>Take the following example:</p>
  
  <pre><code>&lt;select&gt;
  &lt;option value="China"&gt;
  &lt;option value="Holland"&gt;
  &lt;option value="France"&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>I know that you can alter styling according to an attribute's value using CSS3 attribute selectors</strong>, in the browsers that support them:</p>
  
  <pre><code>option[value="China"] 
  {
      background: red;
  }
  
  option[value="Holland"] 
  {
      background: orange;
  }
  
  option[value="France"] 
  {
      background: blue;
  }
  </code></pre>
  
  <p><strong>But this would change their default color.</strong> I don't want to do that. <em>I want all of these elements to retain their default background color of white in their resting state.</em></p>
  
  <p><strong><code>I only want the dropdown element to adopt its unique color on hovering over that element in the dropdown.</code></strong> </p>
  
  <p>So, for example, <strong>on hovering over the "China" element, I would like China to have a red background color, and Holland and France would retain their white background color until they are hovered over</strong> - at which point Holland would become orange and France would blue.</p>
  
  <p>Is this possible with CSS or jQuery?</p>