Размытие при наведении курсора мыши в Internet Explorer 7

Question

У меня есть всплывающее окно поиска, которое отображается, когда пользователь наводит курсор мыши на гиперссылку, когда пользователь выводит курсор мыши из поля поиска, поле исчезает.Это работает нормально.Когда текстовое поле находится в фокусе, поле поиска должно оставаться видимым до тех пор, пока текстовое поле не потеряет фокус, после чего поле скроется, если курсор не будет наведен на поле.Это хорошо работает во всех браузерах, кроме IE (если быть точным, IE7).В IE событие размытия текстового поля запускается при наведении курсора мыши на текстовое поле, эффективно скрывая поле поиска.Вот код, который я написал:

<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search button to show the hide box
        $(".search").mouseout(
            function() {
                $(".open").hide();
            });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search box so it doesnt hides when the users mouse exits the box
        $(".open").mouseout(
            function() {
                $(".open").hide();
            });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(
            function() {
                $(".open").mouseout(
                    function() {
                        $(".open").show();
                    });
            });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
            function() {
                $(".open").hide();
                $(".open").mouseout(
                    function() {
                        $(".open").hide();
                    });
            });


    });
</script>

И вот HTML-код:

<a class="search" href="#"><span>Search</span></a>
<div class="open">
    <input id="tbSearch" type="text" />
    <a class="go" href="#"><span>Go</span></a>
</div>

Answer 1

Проблема, по-видимому, заключается в том, что вы повторно привязываете события, не развязывая их.Таким образом, в конечном итоге возникает несколько событий, которые запускают отображение и скрытие поля в зависимости от того, сколько раз происходило событие фокусировки и размытия.Я не совсем уверен, почему по какой-то причине он выходит из строя в IE, но в решении, похоже, слишком много движущихся частей, поэтому трудно точно сказать, где он выходит из строя.

В прошлом мне удавалось заставить подобные вещи работать, используя атрибут, который поддерживает состояние текстового поля (сфокусированное или размытое).Попробуйте это сделать:

<script type="text/javascript">

$(function() {

var showBox = function() {
    $(".open").show();
};
var hideBox = function() {
    if (!$(".open").attr("searching")) {
        $(".open").hide();
    }
};

$(".search").hover(showBox, hideBox);
$(".open").hover(showBox, hideBox).hide();

    $("#tbSearch").focus(function() {
    $(".open").attr("searching", "true");
    }).blur(function() {
    $(".open").removeAttr("searching");
    $(".open").hide();
});
});

</script>

Answer 2

<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
         });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
        });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(function() {
                $(".open").show();
        });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
             $(".open").hide();
        });

    });
</script>