First of all, you should hide the elements with opacity: 0
or display: none
, this also allows you to animate them properly.
The problem is the order in which things are executed, and that handlers (like .hover
) are stored. You wrote:
"when the document is loaded, if #text doesn't have focus, remember to always toggle k and k_b on hover"
So basically you always attach the hover handler.
Here is a more complicated, but working solution, see the fiddle for the slight css and html changes:
$(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);
});
});
And the fiddle: http://jsfiddle.net/7FGK8/1/