Question

旧代码

当我超过我的“#search”div时我遇到了问题然后它就像我应该做的那样滑动它，问题是当它滑出它时会显示一个搜索输入字段，当鼠标越过那个输入字段时开始运行鼠标输出功能，我已经通过使用空函数将＃鼠标放在#search输入上来停止此操作但是当我的鼠标离开输入并且“#search”潜水时它不会运行动画后退功能。

这是我的剧本

$("#search").mouseover(function(){
    $(this).animate({"left": "0px"}, 500);
});
$("#search").mouseout(function(){
    if($("#search input").mouseover()){
        return false
        }
    else {
    $(this).animate({"left": "-282px"}, 500);
    }
});

我做错了什么？或者有人有解决方案吗？我是jQuery的新手，所以刚刚开始学习:)我搜索了谷歌和过去2天的文档，也许只是我的盲人，这就是我需要你帮助的原因：

编辑：新代码＆amp; JS FIDDLE

我需要进行不同的搜索栏，所以我现在只需要再次编写代码，而不需要单击该语句。看看JSfiddle

http://jsfiddle.net/D7s45/2/

这是我想创建的jQuery：）

Answer 1

var t, isout=true;
$("#search").children("form").children().mouseover(function () {
    clearTimeout(t); isout = false;
});

$("#search").children("form").children().mouseout(function () {
    isout = true;
    tout = setTimeout(function () { $("#search").animate({ "left": "-282px" }, 500); }, 100);

});

$("#search").mouseover(function () {
    if (isout) $(this).animate({ "left": "0px" }, 500);
    clearTimeout(t); isout = false;
});

$("#search").mouseout(function () {
    isout = true; tout = setTimeout(function () { $("#search").animate({ "left": "-282px" }, 500); }, 100);
});

Answer 2

在悬停输入时尝试停止传播：

$("#search input").hover(function(e) {
  e.stopPropagation();
}, function(e) {
  e.stopPropagation();
});

#search div的常规代码应正常运行。

鼠标悬停＆amp;使用输入字段的jQuery问题的鼠标输出

2 个答案: