1

泡立ちに問題がある（と思う）

入力があります

ホバー時に、入力の親にクリック イベントを含む div を追加します。2 番目のホバー機能は、追加された div を削除することです。

問題は、オーバーレイが追加しているdivの上にあるため、マウスがオーバーレイの上にあるときにマウスアウト関数が呼び出され、マウスオーバーがトリガーされることです..など.

http://jsfiddle.net/N7FFB/

var clear = $('<div class="keyword-clear-icon">').css({
                left            : $('#searchtext').width() - 20,
            }).attr('title','Clear');

$("#dashboard-searchbox #searchtext").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);

この効果を達成する標準的な方法はありますか？

4

2 に答える 2

1

#dashboard-searchbox代わりに、コンテナーにホバーを適用するだけです。

http://jsfiddle.net/N7FFB/2/

Javascript

$("#dashboard-searchbox").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);
于 2013-09-17T15:41:22.163 に答える
1

JavaScript を使用する代わりに、タイプ入力ボックスを使用できます。search

<input id="searchtext" name="SearchText" 
       type="search" placeholder="Anywhere or anything…" />

デモ: http://jsfiddle.net/maniator/N7FFB/1/

于 2013-09-17T15:28:22.123 に答える