Diese Abfrage behandelt die Erstellung eines Auswahlfelds, bei dem die Optionen beim Hover sichtbar sind, anstatt darauf zu klicken. Um diesen Effekt zu erzielen, können Sie den folgenden Ansatz implementieren.
<code class="js">$('#selectUl li:not(":first")').addClass('unselected'); // Hide unselected elements $('#selectUl').hover( function() { // Mouseover event $(this).find('li').click( function() { $('.unselected').removeClass('unselected'); // Remove unselected styles $(this).siblings('li').addClass('unselected'); // Add unselected styles to other elements var index = $(this).index(); // Get the index of the clicked option $('select option:selected').removeAttr('selected'); // Deselect the previously chosen option $('select[name=size]') .find('option:eq(' + index + ')') .attr('selected', true); // Select the new option } ); }, function() { // Mouseout event // Hide unselected elements } );</code>
Um das Auswahlfeld zu formatieren, können Sie das folgende CSS verwenden:
<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>
Ein alternativer Ansatz ist die Verwendung eines einfachen Plug-Ins:
<code class="js">(function($) { $.fn.selectUl = function() { // ... code goes here ... return $(this); }; })(jQuery); $('#sizes').selectUl();</code>
Das obige ist der detaillierte Inhalt vonWie mache ich HTML-Auswahlfeldoptionen beim Hover sichtbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!