Bagaimana untuk Mencipta Kotak Pilih yang Menunjukkan Pilihan pada Hover?

Mengakses Pilihan Kotak Pilih pada Tuding

Persoalan yang dikemukakan ialah bagaimana untuk mencipta kotak pilihan di mana pilihan menjadi kelihatan pada tuding, bukannya mengklik.

Penyelesaian 1: JavaScript dan CSS

Penyelesaian ini menggunakan JavaScript dan CSS untuk memaparkan pilihan semasa menuding:

<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>

Penyelesaian 2: Pemalam jQuery

Pendekatan alternatif ialah menggunakan pemalam jQuery untuk memudahkan proses:

<code class="javascript">$(function() {
    $('select.makePlain').selectUl();
});</code>

CSS dan HTML

CSS dan HTML yang digunakan dalam demo:

<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>

Penyesuaian

Pemalam boleh disesuaikan dengan mudah dengan ciri tambahan seperti teks dinamik , penerangan dan banyak lagi.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kotak Pilih yang Menunjukkan Pilihan pada Hover?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!