Wie erstelle ich ein Auswahlfeld, das beim Hover Optionen anzeigt?

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!