Comment créer une zone de sélection qui affiche les options au survol ?

Accès aux options de la zone de sélection en survol

La question posée est de savoir comment créer une zone de sélection où les options deviennent visibles au survol, plutôt que en cliquant.

Solution 1 : JavaScript et CSS

Cette solution utilise JavaScript et CSS pour afficher les options au survol :

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

Solution 2 : Plugin jQuery

Une approche alternative consiste à utiliser un plugin jQuery pour simplifier le processus :

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

CSS et HTML

Le CSS et le HTML utilisés dans la démo :

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

Personnalisation

Le plugin peut être facilement personnalisé avec des fonctionnalités supplémentaires telles que le texte dynamique , descriptions et plus encore.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!