Select Option Hover

Question

I have a select element, and I want to detect which option the user is hovering over. I am using the code here that ShankarSangoli has wrote but it is not working. I have tested in Chrome.

JSFiddle

$("select").hover(function (e)
{
     var $target = $(e.target); 
     if($target.is('option')){
         alert($target.attr("id"));//Will alert id if it has id attribute
         alert($target.text());//Will alert the text of the option
         alert($target.val());//Will alert the value of the option
     }
});

As said in the question your refering to. Chrome does NOT support hover on `option` elements, neither does IE. — Henrik Andersson, Dec 05 '12 at 22:23
I think you have to rethink your design for this one if you want Chrome or IE functionality. :( — Henrik Andersson, Dec 05 '12 at 22:26
Alrite, thanks. Can you post your response as an answer so I can accept it. — Jon, Dec 05 '12 at 22:30
possible duplicate of [jQuery-Select list option hover](http://stackoverflow.com/questions/9143924/jquery-select-list-option-hover) — Kate Gregory, Dec 06 '12 at 02:43

score 2 · Answer 1 · edited May 23 '17 at 11:48

2

IE and Chrome do not support hover on option elements as limelights has pointed out. However, if you are already comfortable using jQuery you could try using the combobox it can use an underlying select but builds the options using ul and li elements.

edited May 23 '17 at 11:48

Community

1
1

answered Dec 05 '12 at 22:37

purgatory101

6,494
1
20
21

Forgot about that completely! Nice one! :D – Henrik Andersson Dec 05 '12 at 22:40
That is what I have always used whenever I have wanted better styling, more control or a searchable (autocomplete-style) list. There are a few quirks with doing the combobox, but nothing that is a deal-breaker...and it is nice since you can use it right on top of a native select. – purgatory101 Dec 05 '12 at 22:43

score 2 · Accepted Answer · answered Dec 05 '12 at 22:41

The functionality you're trying to achieve is not availiable in Chrome nor IE yet. This is pointed out in the question you're currently refering to.

As @purgatory 101 pointed out, a clever use of the combobox will allow you to "hook in" additional jquery which might allow you to alert(); on hover.

Just working of the source to combobox this would be a pointer in the right direction:

$('ul.ui-autocomplete ui-menu li').hover(function(){
    //do your stuff here.
});

score 1 · Answer 3 · answered Dec 05 '12 at 22:33

1

Your only way to accomplish this would be use use a SELECT replacement that uses HTML + JS + CSS instead of the native control.

answered Dec 05 '12 at 22:33

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 4 · answered Jan 10 '14 at 11:52

0

option:hover works in IE11 - woot!

answered Jan 10 '14 at 11:52

A2D

308
2
7

Select Option Hover

4 Answers4