在懸停時訪問選擇框選項
提出的問題是如何創建一個選擇框,其中選項在懸停時可見,而不是
解決方案1:JavaScript 和CSS
此解決方案利用JavaScript 和CSS 在懸停時顯示選項:
<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>
解決方案2:jQuery 外掛程式
另一種方法是使用jQuery 外掛程式來簡化流程:
<code class="javascript">$(function() { $('select.makePlain').selectUl(); });</code>
CSS 和HTML
CSS 和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>示範中使用的CSS 與HTML:
<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>
自訂可以使用動態文字等附加功能輕鬆自訂外掛程式、描述等等。
以上是如何建立一個在懸停時顯示選項的選擇框?的詳細內容。更多資訊請關注PHP中文網其他相關文章!