Zugriff auf Auswahlfeldoptionen beim Bewegen des Mauszeigers
Die gestellte Frage ist, wie man ein Auswahlfeld erstellt, bei dem die Optionen beim Bewegen des Mauszeigers sichtbar werden, anstatt Klicken.
Lösung 1: JavaScript und CSS
Diese Lösung verwendet JavaScript und CSS, um die Optionen beim Bewegen des Mauszeigers anzuzeigen:
<code class="javascript">$('#selectUl li:not(":first")').addClass('unselected'); // Hides '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 other li elements var index = $(this).index(); $('select option:selected').removeAttr('selected'); // Deselects previous selection $('select[name=size]') .find('option:eq(' + index + ')') .attr('selected',true); // Assuming a 1:1 relationship between li and option elements }); }, function(){ // Mouseout or mouseleave });</code>
Lösung 2: jQuery-Plugin
Ein alternativer Ansatz besteht darin, ein jQuery-Plugin zu verwenden, um den Prozess zu vereinfachen:
<code class="javascript">$(function() { $('select.makePlain').selectUl(); });</code>
CSS und HTML
Das in der Demo verwendete CSS und HTML:
<code class="html"><select name="size" class="makePlain"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select> <ul id="selectUl"> <li>small</li> <li>medium</li> <li>large</li> </ul></code>
<code class="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; }</code>
Anpassung
Das Plugin kann einfach mit zusätzlichen Funktionen wie dynamischem Text angepasst werden , Beschreibungen und mehr.
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Auswahlfeld, das beim Hover Optionen anzeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!