1

CSS ホバー ドロップダウン メニューを作成しています。ホバーした検索アイコンもあります。アイコンにカーソルを合わせると、検索用の入力がドロップダウンします。ただし、マウスが領域から離れると、検索ボックスは消えます。カーソルが入力フィールド内にある限り、または入力がフォーカスされている限り、ボックスをそこに保持しようとしています。

私が今私に知らせたことを投稿する必要がある場合は、基本的には標準の純粋な CSS ホバードロップダウンを使用するだけです。これは基本的な HTML セットアップです。

<li class="search">
    <ul class="search">
        <li><input placeholder="enter search" action=""></li>

それでうまくいきますが、移動するときに述べたように、カーソルが点滅していても再び非表示になります。これを機能させるには何らかの JavaScript が必要になると思いますが、どこから始めればよいかわかりません。

4

2 に答える 2

0

liJavaScript を使用してクラスを追加および削除するだけです。ただし、以下のコードは含まれjQueryています。

        $( ".search" ).onmouseenter( function() {
            $( "input" ).addClass( "seeMe" ).focus();
        });

        $( "input" ).blur( function() {
            $( this ).removeClass( "seeMe" );
        });

これにより、入力が表示され、検索liにカーソルを合わせるとフォーカスが与えられ、入力がフォーカスを失うと非表示になります。

私のjsFiddleでこれの修正版を参照してください。

于 2012-07-18T20:46:18.447 に答える