Heim > Artikel > Web-Frontend > Wie werden HTML-Auswahlfeldoptionen beim Hover angezeigt?
So zeigen Sie HTML-Auswahlfeldoptionen beim Hover an
Die von Ihnen vorgestellte Herausforderung besteht darin, ein Auswahlfeld zu erstellen, in dem die Optionen bis zum Benutzer verborgen bleiben schwebt darüber. Hier ist eine detaillierte Lösung:
Implementierung:
Der bereitgestellte Code nutzt das hover()-Ereignis von jQuery, um die Sichtbarkeit der Listenelemente umzuschalten. Die nicht ausgewählte CSS-Klasse wird zum Formatieren von Listenelementen verwendet, die derzeit nicht angezeigt werden.
<code class="html"><select name="size"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select></code>
<code class="css">select { opacity: 0.5; } ul { width: 8em; line-height: 2em; } li { cursor: pointer; 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>
<code class="js">$('#selectUl li:not(":first")').addClass('unselected'); $('#selectUl').hover( function () { $(this).find('li').click(function () { $('.unselected').removeClass('unselected'); $(this).siblings('li').addClass('unselected'); var index = $(this).index(); $('select option:selected').removeAttr('selected'); $('select[name=size]') .find('option:eq(' + index + ')') .attr('selected', true); }); }, function () {} );</code>
So funktioniert es:
Das obige ist der detaillierte Inhalt vonWie werden HTML-Auswahlfeldoptionen beim Hover angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!