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>

在Internet Explorer 7中模糊鼠标移动

2 个答案: