Hover textbox remains fixed when selected

Question

I\'ve created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box

Answer 1

Just add a check to see if the textbox has focus:

$('#search-button, #search-text').hover(function searchbox () {
    $('#search-text').addClass("fixed-textbox");
},function () {
    if(!$("#search-text").is(":focus")){
        $('#search-text').removeClass("fixed-textbox");
    }
});

//hide if focus out
$("#search-text").on("focusout", function(){
    //Only if textbox does not have a value
    if($("#search-text").val() == null || $("#search-text").val() == ""){
        $('#search-text').removeClass("fixed-textbox");
    }
});