Jquery Hover Bubble, вызывающий эффект циклического мигания

У меня проблема с пузырями (я думаю)

у меня есть вход

При наведении я добавляю div с событием click к родительскому элементу ввода, вторая функция наведения — удалить указанный добавленный 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();
    }
);

Есть ли стандартный способ достижения этого эффекта?


javascript jquery css jquery-hover
person John    schedule 17.09.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вместо этого просто примените наведение курсора к контейнеру #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();
    }
);
person thgaskell    schedule 17.09.2013

arrow_upward
1
arrow_downward

Вместо использования JavaScript вы можете использовать поле ввода типа search:

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

Демонстрация: http://jsfiddle.net/maniator/N7FFB/1/

person Naftali aka Neal    schedule 17.09.2013
comment
какая версия html поддерживает этот атрибут? - person Mohsen Safari; 17.09.2013
comment
@John, вы можете использовать шив / прокладку HTML5, чтобы он работал во всех браузерах. - person Naftali aka Neal; 17.09.2013
comment
А теперь ты делаешь @John :-D - person Naftali aka Neal; 17.09.2013