jQuery-Opción de lista de selección hover

Question

Quiero alertar a una opción cuando el cursor del mouse está sobre ella. Utilizo este código:

$("select > option").hover(function() 
    { 
     alert($(this).attr("id")); 
    }); 

Lamentablemente, esto no funciona ni en IE ni en FF.

¿Puede alguien darme una pista por favor?

Answer 1

Puede intentar esto.

$("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 
    } 
}); 

Answer 2

Si comete un cuadro de selección de tipo "cuadro de lista" mediante la adición de un "size = x" atributo de la siguiente manera:

<select size="3"> 
    <option>...</option> 
    <option>...</option> 
</select> 

El evento activable trabajará en los elementos de opción:

$('option').hover(function(){ 
    //code here 
}); 

Answer 3

Aquí hay una solución (bastante decente, supongo) -

• Utilice el evento mouseover para establecer el tamaño del cuadro de selección igual al no. de sus hijos
• Use mouseenter evento para obtener las opciones. mouseenter trabajos sobre opciones perfectamente cuando size atributo es allí (todos sabemos que ahora)
• Uso mouseout evento para ajustar el tamaño del cuadro de selección de nuevo a 1, para conseguir nuestra Selección normal caja posterior :)

JSFiddle