Question

我正在尝试：

1 - 在Div1上悬停时，出现Div2 2-Div 2有一个文本字段 3 - 文本字段具有焦点时，即使悬停在Div1 / Div2上，Div2仍保持打开状态除了Div2之外，只需点击任何内容即可隐藏Div2

<div id="one"></div>
<div id="two">
  <input type="text" id="text">
</div>

   $(document).ready(function() {
    if(!$('#text').is(":focus")) {
    $('#one, #two').hover(function() {
      $('#two').toggleClass('k k_b');
    });
  };
});

div2并没有保持开放，我不认为我会以正确的方式解决这个问题。
对我来说代码说：
“如果#text没有焦点，请执行此操作。如果#text有焦点，请不要这样做。“

div2隐藏了悬停。然后一旦它有焦点，隐藏它的唯一方法就是点击关闭。我不确定事件授权如何在这里发挥作用。有人有什么建议吗？我正在考虑使用onblur来隐藏（或删除新类）。

Answer 1

首先，您应该使用opacity: 0或display: none隐藏元素，这也可以让您正确地设置它们的动画。

问题在于执行事物的顺序，以及存储处理程序（如.hover）。你写了：＆＃34;加载文档时，如果#text没有焦点，请记住始终在悬停时切换k和k_b＆＃34;

所以基本上你总是附加悬停处理程序。

这是一个更复杂但有效的解决方案，请参阅轻微的css和html更改的小提琴：

$(document).ready(function() {
    $('#wrapper').hover(function() {
        $('#two').fadeIn(200);
    }, function() {
        if ( !$('#text').is(":focus") )
            $('#two').fadeOut(200);
    });
    $('#two').on("blur", "input", function() {
        if ( !$('#one').is(":hover") )
            $('#two').fadeOut(200);
    });
});

小提琴：http://jsfiddle.net/7FGK8/1/

jquery - 如果字段有焦点做事件

1 个答案: