CODEWITHSUNDEEP
jqueryhtmlcss
Jon
Jon

Reputation: 8511

Select Option Hover

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
     }
});

Upvotes: 0

Views: 5022

Answers (4)

A2D
A2D

Reputation: 308

option:hover works in IE11 - woot!

Upvotes: 0

Henrik Andersson
Henrik Andersson

Reputation: 47172

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.
});

Upvotes: 2

purgatory101
purgatory101

Reputation: 6770

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.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

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

Upvotes: 1

Related Questions