jQuery的模糊，但專注於另一個

Question

我有一個情況，我有一個帶有兩個輸入元素的隱藏div，它在默認情況下是隱藏的，並且僅當我將內容懸停時才顯示，而當我懸停時才消失。 現在，我希望該div如果輸入元素之一被聚焦而不會消失，而如果模糊則消失。 我已經解決了這一部分，直到，如果焦點從一個輸入轉移到另一個輸入，div將消失，而我不希望它消失，因為其中一個輸入仍在聚焦。

這是我的代碼：

// code with the problem I think.
$('#inputText1, #inputText2').live("blur", function() {
    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
});

// hover to show and hide the div
$(".visibleDiv").hover(
    function() {
        $('#myDiv').fadeIn("slow");
    },
    function() {
        if(!$(this).find(".jqTransformInputWrapper").hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
);

我的HTML：

<div class="visibleDiv">
    hover me
    <div id="myDiv">
        <input name="inputText1" id="inputText1" type="text" />
        <input name="inputText2" id="inputText2" type="text" />
    </div>
</div>

順便說一句，我正在使用jqTransform作為輸入元素。

Answer 1

嘗試這個，

// code with the problem I think.
$('#inputText1, #inputText2').live("blur", function() {

    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }

}).live("focus",function(){
    $('#myDiv').stop(true,true).show();
});

Answer 2

給一些類輸入框並在其上應用jQuery

<div class="visibleDiv">
    hover me
    <div id="myDiv">
        <input name="inputText1" id="inputText1" type="text" class="inputbox" />
        <input name="inputText2" id="inputText2" type="text" class="inputbox"/>
    </div>
</div>


// now this will work
$('.inputbox').live("blur", function() {
 // u can also use this
 // if($(this).parent().is(":visible") )
    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
});

注意：使用委托代替實時