How can I change the background color when user hovers it ? I have tried this but it's not working.

<select>
<option>bmw</option>
<option>audi</option>
<option>mercedes</option>
</select>



$('option').hover(function(){
$(this).css("background-color","#FFFFCC");
}); 

How can I change the background color when user hovers it ? I have tried this but it's not working.

<select>
<option>bmw</option>
<option>audi</option>
<option>mercedes</option>
</select>



$('option').hover(function(){
$(this).css("background-color","#FFFFCC");
}); 

• javascript
• jquery
• hover

• Even if it could be done, you'd want to do this with CSS, not JavaScript. – Dagg Nabbit Commented Mar 11, 2012 at 3:27
• i think this may solve your question stackoverflow./questions/2402146/… – Angel Commented Aug 10, 2014 at 15:05
• take a look at this article : jQuery Select CSS Style – Farshad Commented Sep 1, 2014 at 6:01
• possible duplicate of Change Select List Option background colour on hover – doppelgreener Commented May 1, 2015 at 7:22

3 Answers 3

You cannot use option in this way. The best solution would be styling something similar with <ul> and <li> and interacting with JS.

hover event can not be bound to an option tag. I'll update this post if I find the documentation or proof that says so. In my experience, this cannot be done.

Since you already use jQuery, there is a pretty nice plugin - image-dropdown + demo from the makers.