Heim > Web-Frontend > CSS-Tutorial > Wie erstelle ich ein Auswahlfeld, das beim Hover Optionen anzeigt?

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

DDD
Freigeben: 2024-11-02 09:17:02
Original
241 Leute haben es durchsucht

How to Create a Select Box That Shows Options on Hover?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage