Html Seleccione las opciones de cuadro en Hover?

He visto esta selectbox muy simple en youtube, donde las opciones de selección son visibles al pasar el mouse (en lugar de hacer clic), como se ve en la siguiente captura de pantalla.

texto alternativo

Estoy tratando de crear un efecto similar en el siguiente cuadro de selección simple. ¿Puede alguien ayudarme cómo se puede hacer esto? Gracias.

 Small Medium Large  

Esta es una forma de hacerlo, aunque preferiría un enfoque más plug-in (en lugar de codificar el html ul ):

 $('#selectUl li:not(":first")').addClass('unselected'); // Used to hide the 'unselected' elements in the ul. $('#selectUl').hover( function(){ // mouse-over $(this).find('li').click( function(){ $('.unselected').removeClass('unselected'); // removes the 'unselected' style $(this).siblings('li').addClass('unselected'); // adds 'unselected' style to all other li elements var index = $(this).index(); $('select option:selected').removeAttr('selected'); // deselects the previously-chosen option in the select $('select[name=size]') .find('option:eq(' + index + ')') .attr('selected',true); // assumes a 1:1 relationship between the li and option elements }); }, function(){ // mouseout (or mouseleave, if they're different, I can't remember). }); 

Demostración de JS Fiddle .


Editado para incluir una alert demuestre los cambios en el valor del elemento select : JS Fiddle demo .


Editado para incluir el css y html utilizados en la demostración:

html

  
  • small
  • medium
  • large

css:

 select { opacity: 0.5; } ul { width: 8em; line-height: 2em; } li { display: list-item; width: 100%; height: 2em; border:1px solid #ccc; border-top-width: 0; text-indent: 1em; background-color: #f90; } li:first-child { border-top-width: 1px; } li.unselected { display: none; background-color: #fff; } ul#selectUl:hover li.unselected { background-color: #fff; } ul#selectUl:hover li, ul#selectUl:hover li.unselected { display: list-item; } ul#selectUl:hover li { background-color: #fc0; } ul#selectUl li:hover, ul#selectUl li.unselected:hover { background-color: #f90; } 

Esto hace que el menú oculte los elementos unselected hasta que se cuelgue el ul , luego revele todas las opciones, y usa el evento click() para asignar el nombre de clase unselected a los elementos sin clic; que permite que el elemento cliqueado sea aún visible en mouseout.

El CSS anterior refleja la edición más reciente, para hacer que la actualmente seleccionada, y :hover -ed, li más visible.

Última demo de JS Fiddle .


Editado porque, bueno, me aburrí un poco. Y no tenía nada mejor que hacer, así que hice un simple complemento:

 (function($) { $.fn.selectUl = function(){ var $origSelect = $(this); var newId = $(this).attr('name') + '-ul'; var numOptions = $(this).children().length; $('
    ') .insertAfter($(this)); for (var i = 0; i < numOptions; i++) { var text = $(this).find('option').eq(i).text(); $('
  • ').text(text).appendTo('#' + newId); } if ($(this).find('option:selected')) { var selected = $(this).find('option:selected').index(); $('#' + newId) .find('li') .not(':eq(' + selected + ')') .addClass('unselected'); } $('#' + newId + ' li') .hover( function(){ $(this).click( function(){ var newSelect = $(this).index(); $(this) .parent() .find('.unselected') .removeClass('unselected'); $(this) .parent() .find('li') .not(this) .addClass('unselected'); $($origSelect) .find('option:selected') .removeAttr('selected'); $($origSelect) .find('option:eq(' + newSelect + ')') .attr('selected',true); }); }, function(){ }); // assuming that you don't want the 'select' visible: $(this).hide(); return $(this); } })(jQuery); $('#sizes').selectUl();

    Demostración de JS Fiddle, incluido el ‘plug-in’ .

    Notas:

    • Esto no está completamente posicionado, por lo que si tiene más de una select (lo que sin duda puede hacer, y funciona bien) se atornilla un poco (o mucho) con el flujo de páginas, pero esto se puede modificar en CSS (Imagino, aunque aún no lo he intentado).
    • Probablemente podría hacerlo con algunas opciones, posiblemente permitiendo que se usen elementos dl en lugar de la ul actual, lo que permitiría dar una explicación de las opciones disponibles.
    • Sospecho que podría optimizarse mucho más de lo que es actualmente, pero no estoy seguro de cómo hacerlo. Posiblemente dormir un poco y, tarde, explorar la API de jQuery podría ofrecer algunas ideas (aunque si alguien ve algo obvio por favor deje un comentario! O tome el JS Fiddle y, a falta de un mejor término, bótelo (aunque obviamente apreciaría) enlaces a cualquier bifurcación / actualización posterior).
    • No estoy del todo seguro de las opciones de licencia disponibles (ya que todo en SO es Creative Commons cc-by-sa , según Jeff Atwood , y el pie de página de este sitio, de todos modos ), pero por lo que vale, estoy bastante feliz de que cualquiera tome lo anterior y, bueno, haga lo que quiera con él (¡si le sirve de algo, diviértase!).

    Editado porque sentí que debería haber un elemento de ‘orientación’ visible, y también para intentar explicar algo de cómo funciona todo.

    Dado el html:

      

    Use jQuery para llamar al complemento:

     $('#sizes').selectUl(); 

    Esto toma la selección anterior, y crea un ul con el siguiente recargo:

     
    • Select a size:
    • XX-Small
    • X-Small
    • Small
    • Medium
    • Large
    • X-Large
    • XX-Large

    El CSS utilizado (en la demostración):

     ul.plainSelect { /* targets those 'ul' elements created by the plug-in */ border: 1px solid #000; } ul.plainSelect li { /* this styles the 'selected' li 'option' element */ background-color: #f90; display: list-item; } ul.plainSelect li.guidance { /* this is the 'Select a Reason' guidance/explanation from the image in the question */ border-bottom: 1px solid #000; padding: 0.3em; font-weight: bold; font-size: 1.2em; background-color: #fff; } ul.plainSelect li.unselected { /* hides the 'unselected' options, and removes the background-color for contrast */ background-color: #fff; display: none; } ul.plainSelect:hover li, ul.plainSelect:hover li.unselected { /* ensures that the 'li' elements pop-up when the list is hovered over, */ /* and act/display like 'li' elements */ display: list-item; } 

    Demostración de JS Fiddle .

    Es imposible abrir un cuadro de select de la manera sencilla que está describiendo. No es coincidencia que la imagen que ha proporcionado no se parece en nada a un cuadro de selección normal. Esto se debe a que probablemente se trata de una lista ul que tiene el estilo para que luzca como lo hace, mostrándose en el vuelo estacionario, que en realidad es posible.

    Creé un ejemplo sobre jsfiddle de cómo se podría hacer.

    Si estás interesado en hacerlo de esta manera, tengo una forma simple, no javascript, de hacerlo en mi proyecto actual en realidad (mira el menú “Quiero” en la parte superior). Al igual que @Marcus dijo, esto no es con un cuadro de selección, sino que se hace con una lista desordenada (

      ).

      El html es directo:

        

      la parte importante es la CSS, esencialmente solo las primeras 2 reglas. El div parece expandirse debido al overflow:visible en :hover .

       #iWantToMenuContainer { overflow:hidden; } #iWantToMenuContainer:hover { overflow:visible } #iWantToMenuContainer ul { border:1px solid #b6c2b9; background:#fff; padding:1px 20px 3px 5px } #iWantToMenuContainer a:link,#iWantToMenuContainer a:visited { display:block; background: #fff; } #iWantToMenuContainer a:hover { background:#e6e6e6 } 

      En el trabajo en este momento, así que no puedo verificar youtube, pero por el estilo supongo que ese control de “selección” no es un control de selección real. Lo más probable es que se implemente como un menú desplegable de navegación, pero en lugar de navegar a una URL al hacer clic en él, reemplaza el contenido y el valor de una etiqueta de entrada. Luego, al enviar el formulario, puede elegir el valor de la etiqueta.

      Enlace al plugin jquery actualizado Forked $ .selectUI plugin

      • Corrige la iteración sobre múltiples elementos pasados ​​en