JQuery はナビゲーション ドロップダウンを表示するためのマウス スクロールを実装します list_jquery

テスト Web ページ

/p> >

百度

NetEase

テンセント

;li>Taobao



このコードには Jquery ライブラリが含まれています: >



コードをコピー

コードをコピーします

ライン高さ:25px;
背景:黒;
#ul li{ 🎜>幅:80px;
色:白;
行の高さ:25px;黒;
ボーダー: 1 ピクセル白;
.highLight{
高さ: 25 ピクセル;
ボーダー: 1 ピクセル青; ;
color :black;
}


ここで JS ファイルについて説明することが重要です。




コードをコピー


コードは次のとおりです。


$(document).ready(function ( ){
$('#ul').hide(); //ドロップダウン リストを非表示にするページを開きます
$('#it').hover( //マウスを上にスライドすると、ナビゲーション列
function(){
$('#ul').show(); // ドロップダウン リストを表示
$(this).css({'color':'red', 'background-color':'orange'}); //目を引くナビゲーション列のスタイルを設定します
},
function(){
$('#ul').hide(); //マウスを離した後はドロップダウン リストを非表示にします
}
);
$('#ul').hover( //ドロップダウン リスト自体も、ドロップダウン リストをクリックできないようにマウスをスライドさせます。
function(){
$('#ul') .show();
},

Web サイトのエディターに現在問題があるため、写真をアップロードすることができません。写真がない場合は、まずローカルでテストして効果を確認してください。