Maison >interface Web >tutoriel CSS >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!