ホームページ >ウェブフロントエンド >CSSチュートリアル >クリックする代わりにホバー時に選択ボックスのオプションを表示するにはどうすればよいですか?
選択ボックスのオプションを表示するためのホバーリング
提示された問題には、クリック後ではなくホバー時にオプションを表示する選択ボックスの作成が含まれます。提供されるコードは単純な選択ボックスです:
<select name="size"> <option value="small">Small</option> <option value="medium">Medium</option> <option value="large">Large</option> </select>
ソリューション
提供される jQuery ソリューションは、目的の動作を実現することを目的としています:
$('#selectUl li:not(":first")').addClass('unselected'); $('#selectUl').hover( function(){ $(this).find('li').click( function(){ $('.unselected').removeClass('unselected'); $(this).siblings('li').addClass('unselected'); var index = $(this).index(); $('select option:selected').removeAttr('selected'); $('select[name=size]') .find('option:eq(' + index + ')') .attr('selected',true); }); }, function(){ });
説明
追加機能
ソリューションは以下を含むように拡張されました。
以上がクリックする代わりにホバー時に選択ボックスのオプションを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。